Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-20 13:54:36 +01:00
Code Issues 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 76409f79e0
commit 7551332c01
2 changed files with 20 additions and 8 deletions
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}})",
"hideTools": "Hide tools",
"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,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ChevronDown, ChevronRight } from "lucide-react";
type ToolCallBubbleProps = {
@@ -43,10 +44,17 @@ export function ToolCallBubble({
<Button
variant="ghost"
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} />}
<span className="font-medium">
{open ? (
<ChevronDown size={12} className="shrink-0" />
) : (
<ChevronRight size={12} className="shrink-0" />
)}
<span className="break-words font-medium">
{isLeft ? t("call") : t("result")} {normalizedName}
</span>
</Button>
@@ -55,16 +63,18 @@ export function ToolCallBubble({
<div className="mt-2 space-y-2">
{isLeft && args && Object.keys(args).length > 0 && (
<div className="text-xs">
<div className="font-medium text-muted-foreground">Arguments:</div>
<pre className="mt-1 max-h-32 overflow-auto rounded bg-muted/50 p-2 text-[10px]">
<div className="font-medium text-muted-foreground">
{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)}
</pre>
</div>
)}
{!isLeft && response && response !== "" && (
<div className="text-xs">
<div className="font-medium opacity-80">Response:</div>
<pre className="mt-1 max-h-32 overflow-auto rounded bg-primary/20 p-2 text-[10px]">
<div className="font-medium opacity-80">{t("response")}</div>
<pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-primary/20 p-2 text-[10px]">
{response}
</pre>
</div>