administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-13 20:07:36 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Cleanup UI bubbles

Browse Source
This commit is contained in:
Nicolas Mowen 2026-02-18 16:34:51 -07:00
parent 5faf5e0d84
commit b65ae76f0c
2 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,11 +33,12 @@ export function ToolCallBubble({
return ( return (
<div <div
className={ className={cn(
"rounded-lg px-3 py-2",
isLeft isLeft
? "self-start rounded-lg bg-muted px-3 py-2" ? "self-start bg-muted"
: "self-end rounded-lg bg-primary px-3 py-2 text-primary-foreground" : "self-end bg-primary text-primary-foreground",
} )}
> >
<Collapsible open={open} onOpenChange={setOpen}> <Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
@ -66,7 +67,7 @@ export function ToolCallBubble({
<div className="font-medium text-muted-foreground"> <div className="font-medium text-muted-foreground">
{t("arguments")} {t("arguments")}
</div> </div>
<pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 text-[10px]"> <pre className="scrollbar-container 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>
@ -74,7 +75,7 @@ export function ToolCallBubble({
{!isLeft && response && response !== "" && ( {!isLeft && response && response !== "" && (
<div className="text-xs"> <div className="text-xs">
<div className="font-medium opacity-80">{t("response")}</div> <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]"> <pre className="scrollbar-container 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>

93
web/src/pages/Chat.tsx
View File

@ -75,46 +75,65 @@ export default function ChatPage() {
<div className="flex size-full justify-center p-2"> <div className="flex size-full justify-center p-2">
<div className="flex size-full flex-col xl:w-[50%] 3xl:w-[35%]"> <div className="flex size-full flex-col xl:w-[50%] 3xl:w-[35%]">
<div className="scrollbar-container flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto"> <div className="scrollbar-container flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto">
{messages.map((msg, i) => ( {messages.map((msg, i) => {
<div key={i} className="flex flex-col gap-2"> const isStreamingPlaceholder =
{msg.role === "assistant" && msg.toolCalls && ( i === messages.length - 1 &&
<> msg.role === "assistant" &&
{msg.toolCalls.map((tc, tcIdx) => ( isLoading &&
<div key={tcIdx} className="flex flex-col gap-2"> !msg.content?.trim() &&
<ToolCallBubble !(msg.toolCalls && msg.toolCalls.length > 0);
name={tc.name} if (isStreamingPlaceholder) {
arguments={tc.arguments} return <div key={i} />;
side="left" }
/> return (
{tc.response && ( <div key={i} className="flex flex-col gap-2">
{msg.role === "assistant" && msg.toolCalls && (
<>
{msg.toolCalls.map((tc, tcIdx) => (
<div key={tcIdx} className="flex flex-col gap-2">
<ToolCallBubble <ToolCallBubble
name={tc.name} name={tc.name}
response={tc.response} arguments={tc.arguments}
side="right" side="left"
/> />
)} {tc.response && (
</div> <ToolCallBubble
))} name={tc.name}
</> response={tc.response}
)} side="right"
<MessageBubble />
role={msg.role} )}
content={msg.content} </div>
messageIndex={i} ))}
onEditSubmit={ </>
msg.role === "user" ? handleEditSubmit : undefined )}
} <MessageBubble
isComplete={ role={msg.role}
msg.role === "user" || !isLoading || i < messages.length - 1 content={msg.content}
} messageIndex={i}
/> onEditSubmit={
</div> msg.role === "user" ? handleEditSubmit : undefined
))} }
{isLoading && ( isComplete={
<div className="self-start rounded-lg bg-muted px-3 py-2 text-muted-foreground"> msg.role === "user" || !isLoading || i < messages.length - 1
{t("processing")} }
</div> />
)} </div>
);
})}
{(() => {
const lastMsg = messages[messages.length - 1];
const showProcessing =
isLoading &&
lastMsg?.role === "assistant" &&
!lastMsg.content?.trim() &&
!(lastMsg.toolCalls && lastMsg.toolCalls.length > 0);
return showProcessing ? (
<div className="self-start rounded-lg bg-muted px-3 py-2 text-muted-foreground">
{t("processing")}
</div>
) : null;
})()}
{error && ( {error && (
<p className="self-start text-sm text-destructive" role="alert"> <p className="self-start text-sm text-destructive" role="alert">
{error} {error}