administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-17 05:38:25 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improve UI handling

Browse Source
This commit is contained in:
Nicolas Mowen 2026-02-16 16:57:42 -07:00
parent 964d1331f9
commit bb9a315e85
3 changed files with 67 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/chat/AssistantMessage.tsx
View File

@ -1,9 +0,0 @@
import ReactMarkdown from "react-markdown";
type AssistantMessageProps = {
content: string;
};
export function AssistantMessage({ content }: AssistantMessageProps) {
return <ReactMarkdown>{content}</ReactMarkdown>;
}

24
web/src/components/chat/ChatMessage.tsx Normal file
View File

@ -0,0 +1,24 @@
import ReactMarkdown from "react-markdown";
import { cn } from "@/lib/utils";
type MessageBubbleProps = {
role: "user" | "assistant";
content: string;
};
export function MessageBubble({ role, content }: MessageBubbleProps) {
const isUser = role === "user";
return (
<div
className={cn(
"rounded-lg px-3 py-2",
isUser
? "self-end bg-primary text-primary-foreground"
: "self-start bg-muted",
)}
>
{isUser ? content : <ReactMarkdown>{content}</ReactMarkdown>}
</div>
);
}

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

@ -4,7 +4,7 @@ import { FaArrowUpLong } from "react-icons/fa6";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useState, useCallback } from "react"; import { useState, useCallback } from "react";
import axios from "axios"; import axios from "axios";
import { AssistantMessage } from "@/components/chat/AssistantMessage"; import { MessageBubble } from "@/components/chat/ChatMessage";
import { ToolCallBubble } from "@/components/chat/ToolCallBubble"; import { ToolCallBubble } from "@/components/chat/ToolCallBubble";
import type { ChatMessage, ToolCall } from "@/types/chat"; import type { ChatMessage, ToolCall } from "@/types/chat";
@ -52,63 +52,53 @@ export default function ChatPage() {
}, [input, isLoading, messages, t]); }, [input, isLoading, messages, t]);
return ( return (
<div className="flex size-full flex-col items-center p-2"> <div className="flex size-full justify-center p-2">
<div className="flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto xl:w-[50%]"> <div className="flex size-full flex-col xl:w-[50%] 3xl:w-[35%]">
{messages.map((msg, i) => ( <div className="flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto">
<div key={i} className="flex flex-col gap-2"> {messages.map((msg, i) => (
{msg.role === "assistant" && msg.toolCalls && ( <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"> {msg.toolCalls.map((tc, tcIdx) => (
<ToolCallBubble <div key={tcIdx} className="flex flex-col gap-2">
name={tc.name}
arguments={tc.arguments}
side="left"
/>
{tc.response && (
<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"
<div />
className={ )}
msg.role === "user" </div>
? "self-end rounded-lg bg-primary px-3 py-2 text-primary-foreground" ))}
: "self-start rounded-lg bg-muted px-3 py-2" </>
}
>
{msg.role === "assistant" ? (
<AssistantMessage content={msg.content} />
) : (
msg.content
)} )}
<MessageBubble role={msg.role} content={msg.content} />
</div> </div>
</div> ))}
))} {isLoading && (
{isLoading && ( <div className="self-start rounded-lg bg-muted px-3 py-2 text-muted-foreground">
<div className="self-start rounded-lg bg-muted px-3 py-2 text-muted-foreground"> {t("processing")}
{t("processing")} </div>
</div> )}
)} {error && (
{error && ( <p className="self-start text-sm text-destructive" role="alert">
<p className="self-start text-sm text-destructive" role="alert"> {error}
{error} </p>
</p> )}
)} </div>
<ChatEntry
input={input}
setInput={setInput}
sendMessage={sendMessage}
isLoading={isLoading}
placeholder={t("placeholder")}
/>
</div> </div>
<ChatEntry
input={input}
setInput={setInput}
sendMessage={sendMessage}
isLoading={isLoading}
placeholder={t("placeholder")}
/>
</div> </div>
); );
} }
@ -136,7 +126,7 @@ function ChatEntry({
}; };
return ( return (
<div className="flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-2 xl:w-[50%]"> <div className="flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-2">
<div className="flex w-full flex-row items-center gap-2"> <div className="flex w-full flex-row items-center gap-2">
<Input <Input
className="w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent" className="w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"