administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-12 11:27:34 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improvements to UI

Browse Source
This commit is contained in:
Nicolas Mowen 2026-02-16 19:24:43 -07:00
parent d7d005e71f
commit dddacbbcc5
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/public/locales/en/views/chat.json
View File

@ -6,5 +6,7 @@
"showTools": "Show tools ({{count}})", "showTools": "Show tools ({{count}})",
"hideTools": "Hide tools", "hideTools": "Hide tools",
"call": "Call", "call": "Call",
"result": "Result" "result": "Result",
"arguments": "Arguments:",
"response": "Response:"
} }

24
web/src/components/chat/ToolCallBubble.tsx
View File

@ -6,6 +6,7 @@ import {
CollapsibleTrigger, CollapsibleTrigger,
} from "@/components/ui/collapsible"; } from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ChevronDown, ChevronRight } from "lucide-react"; import { ChevronDown, ChevronRight } from "lucide-react";
type ToolCallBubbleProps = { type ToolCallBubbleProps = {
@ -43,10 +44,17 @@ export function ToolCallBubble({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-auto w-full justify-start gap-2 p-0 text-xs hover:bg-transparent" className={cn(
"h-auto w-full min-w-0 justify-start gap-2 whitespace-normal p-0 text-left text-xs hover:bg-transparent",
!isLeft && "hover:text-primary-foreground",
)}
> >
{open ? <ChevronDown size={12} /> : <ChevronRight size={12} />} {open ? (
<span className="font-medium"> <ChevronDown size={12} className="shrink-0" />
) : (
<ChevronRight size={12} className="shrink-0" />
)}
<span className="break-words font-medium">
{isLeft ? t("call") : t("result")} {normalizedName} {isLeft ? t("call") : t("result")} {normalizedName}
</span> </span>
</Button> </Button>
@ -55,16 +63,18 @@ export function ToolCallBubble({
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
{isLeft && args && Object.keys(args).length > 0 && ( {isLeft && args && Object.keys(args).length > 0 && (
<div className="text-xs"> <div className="text-xs">
<div className="font-medium text-muted-foreground">Arguments:</div> <div className="font-medium text-muted-foreground">
<pre className="mt-1 max-h-32 overflow-auto rounded bg-muted/50 p-2 text-[10px]"> {t("arguments")}
</div>
<pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 text-[10px]">
{JSON.stringify(args, null, 2)} {JSON.stringify(args, null, 2)}
</pre> </pre>
</div> </div>
)} )}
{!isLeft && response && response !== "" && ( {!isLeft && response && response !== "" && (
<div className="text-xs"> <div className="text-xs">
<div className="font-medium opacity-80">Response:</div> <div className="font-medium opacity-80">{t("response")}</div>
<pre className="mt-1 max-h-32 overflow-auto rounded bg-primary/20 p-2 text-[10px]"> <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-primary/20 p-2 text-[10px]">
{response} {response}
</pre> </pre>
</div> </div>