refactor message layout for improved UI consistency
This commit is contained in:
ecwu
288
src/message.tsx
288
src/message.tsx
@@ -12,6 +12,15 @@ import { MessageToolCall } from "@/messageToolCall";
|
||||
import { MessageToolResp } from "@/messageToolResp";
|
||||
import { EditMessage } from "@/editMessage";
|
||||
import logprobToColor from "@/logprob";
|
||||
import {
|
||||
ChatBubble,
|
||||
ChatBubbleAvatar,
|
||||
ChatBubbleMessage,
|
||||
ChatBubbleAction,
|
||||
ChatBubbleActionWrapper,
|
||||
} from "@/components/ui/chat/chat-bubble";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { ClipboardIcon, PencilIcon, TrashIcon } from "lucide-react";
|
||||
|
||||
export const isVailedJSON = (str: string): boolean => {
|
||||
try {
|
||||
@@ -74,10 +83,13 @@ export default function Message(props: Props) {
|
||||
</div>
|
||||
);
|
||||
|
||||
const { toast } = useToast();
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setShowCopiedHint(true);
|
||||
setTimeout(() => setShowCopiedHint(false), 1000);
|
||||
// TODO: Remove show copied hint
|
||||
toast({
|
||||
description: Tr("Message copied to clipboard!"),
|
||||
});
|
||||
};
|
||||
|
||||
const CopyIcon = ({ textToCopy }: { textToCopy: string }) => {
|
||||
@@ -108,154 +120,154 @@ export default function Message(props: Props) {
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`flex ${
|
||||
chat.role === "assistant" ? "justify-start" : "justify-end"
|
||||
}`}
|
||||
<ChatBubble
|
||||
variant={chat.role === "assistant" ? "received" : "sent"}
|
||||
className={chat.role !== "assistant" ? "flex-row-reverse" : ""}
|
||||
>
|
||||
<div className={`w-full`}>
|
||||
<div
|
||||
className={`chat min-w-16 p-2 my-2 ${
|
||||
chat.role === "assistant" ? "chat-start" : "chat-end"
|
||||
} ${chat.hide ? "opacity-50" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`chat-bubble max-w-full ${
|
||||
chat.role === "assistant"
|
||||
? renderColor
|
||||
? "chat-bubble-neutral"
|
||||
: "chat-bubble-secondary"
|
||||
: "chat-bubble-primary"
|
||||
}`}
|
||||
>
|
||||
{chat.hide ? (
|
||||
<MessageHide chat={chat} />
|
||||
) : typeof chat.content !== "string" ? (
|
||||
<MessageDetail chat={chat} renderMarkdown={renderMarkdown} />
|
||||
) : chat.tool_calls ? (
|
||||
<MessageToolCall
|
||||
chat={chat}
|
||||
copyToClipboard={copyToClipboard}
|
||||
/>
|
||||
) : chat.role === "tool" ? (
|
||||
<MessageToolResp
|
||||
chat={chat}
|
||||
copyToClipboard={copyToClipboard}
|
||||
/>
|
||||
) : renderMarkdown ? (
|
||||
// @ts-ignore
|
||||
<Markdown markdown={getMessageText(chat)} />
|
||||
) : (
|
||||
<div className="message-content">
|
||||
{
|
||||
// only show when content is string or list of message
|
||||
// this check is used to avoid rendering tool call
|
||||
chat.content &&
|
||||
(chat.logprobs && renderColor
|
||||
? chat.logprobs.content
|
||||
.filter((c) => c.token)
|
||||
.map((c) => (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: logprobToColor(c.logprob),
|
||||
display: "inline",
|
||||
}}
|
||||
>
|
||||
{c.token}
|
||||
</div>
|
||||
))
|
||||
: getMessageText(chat))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
<ChatBubbleAvatar fallback={chat.role === "assistant" ? "AI" : "US"} />
|
||||
<ChatBubbleMessage isLoading={false}>
|
||||
{chat.hide ? (
|
||||
<MessageHide chat={chat} />
|
||||
) : typeof chat.content !== "string" ? (
|
||||
<MessageDetail chat={chat} renderMarkdown={renderMarkdown} />
|
||||
) : chat.tool_calls ? (
|
||||
<MessageToolCall chat={chat} copyToClipboard={copyToClipboard} />
|
||||
) : chat.role === "tool" ? (
|
||||
<MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
|
||||
) : renderMarkdown ? (
|
||||
<Markdown markdown={getMessageText(chat)} />
|
||||
) : (
|
||||
<div className="message-content">
|
||||
{chat.content &&
|
||||
(chat.logprobs && renderColor
|
||||
? chat.logprobs.content
|
||||
.filter((c) => c.token)
|
||||
.map((c) => (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: logprobToColor(c.logprob),
|
||||
display: "inline",
|
||||
}}
|
||||
>
|
||||
{c.token}
|
||||
</div>
|
||||
))
|
||||
: getMessageText(chat))}
|
||||
</div>
|
||||
<div className="chat-footer opacity-50 flex gap-x-2">
|
||||
<DeleteIcon />
|
||||
<button onClick={() => setShowEdit(true)}>Edit</button>
|
||||
<CopyIcon textToCopy={getMessageText(chat)} />
|
||||
{chatStore.tts_api && chatStore.tts_key && (
|
||||
<TTSButton
|
||||
chatStore={chatStore}
|
||||
chat={chat}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
<TTSPlay chat={chat} />
|
||||
{chat.response_model_name && (
|
||||
<>
|
||||
<span className="opacity-50">{chat.response_model_name}</span>
|
||||
<hr />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showEdit && (
|
||||
<EditMessage
|
||||
setShowEdit={setShowEdit}
|
||||
chat={chat}
|
||||
)}
|
||||
</ChatBubbleMessage>
|
||||
<ChatBubbleActionWrapper>
|
||||
<ChatBubbleAction
|
||||
icon={<TrashIcon className="size-4" />}
|
||||
onClick={() => {
|
||||
chatStore.history[messageIndex].hide =
|
||||
!chatStore.history[messageIndex].hide;
|
||||
chatStore.totalTokens = 0;
|
||||
for (const i of chatStore.history
|
||||
.filter(({ hide }) => !hide)
|
||||
.slice(chatStore.postBeginIndex)
|
||||
.map(({ token }) => token)) {
|
||||
chatStore.totalTokens += i;
|
||||
}
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
/>
|
||||
<ChatBubbleAction
|
||||
icon={<PencilIcon className="size-4" />}
|
||||
onClick={() => setShowEdit(true)}
|
||||
/>
|
||||
<ChatBubbleAction
|
||||
icon={<ClipboardIcon className="size-4" />}
|
||||
onClick={() => copyToClipboard(getMessageText(chat))}
|
||||
/>
|
||||
{chatStore.tts_api && chatStore.tts_key && (
|
||||
<TTSButton
|
||||
chatStore={chatStore}
|
||||
chat={chat}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
{showCopiedHint && <CopiedHint />}
|
||||
{chatStore.develop_mode && (
|
||||
<div
|
||||
className={`gap-1 chat-end flex ${
|
||||
chat.role === "assistant" ? "justify-start" : "justify-end"
|
||||
}`}
|
||||
<TTSPlay chat={chat} />
|
||||
</ChatBubbleActionWrapper>
|
||||
</ChatBubble>
|
||||
{showEdit && (
|
||||
<EditMessage
|
||||
setShowEdit={setShowEdit}
|
||||
chat={chat}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
{showCopiedHint && <CopiedHint />}
|
||||
{chatStore.develop_mode && (
|
||||
<div
|
||||
className={`flex flex-wrap items-center gap-2 mt-2 ${
|
||||
chat.role !== "assistant" ? "justify-end" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm">token</span>
|
||||
<input
|
||||
type="number"
|
||||
value={chat.token}
|
||||
className="h-8 w-16 rounded-md border border-input bg-background px-2 text-sm"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground"
|
||||
onClick={() => {
|
||||
chatStore.history.splice(messageIndex, 1);
|
||||
chatStore.postBeginIndex = Math.max(
|
||||
chatStore.postBeginIndex - 1,
|
||||
0
|
||||
);
|
||||
chatStore.totalTokens = 0;
|
||||
for (const i of chatStore.history
|
||||
.filter(({ hide }) => !hide)
|
||||
.slice(chatStore.postBeginIndex)
|
||||
.map(({ token }) => token)) {
|
||||
chatStore.totalTokens += i;
|
||||
}
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<span className="">token</span>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
value={chat.token}
|
||||
className="input input-bordered input-xs w-16"
|
||||
onChange={(event: any) => {
|
||||
chat.token = parseInt(event.target.value);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
chatStore.history.splice(messageIndex, 1);
|
||||
chatStore.postBeginIndex = Math.max(
|
||||
chatStore.postBeginIndex - 1,
|
||||
0
|
||||
);
|
||||
//chatStore.totalTokens =
|
||||
chatStore.totalTokens = 0;
|
||||
for (const i of chatStore.history
|
||||
.filter(({ hide }) => !hide)
|
||||
.slice(chatStore.postBeginIndex)
|
||||
.map(({ token }) => token)) {
|
||||
chatStore.totalTokens += i;
|
||||
}
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<span
|
||||
onClick={(event: any) => {
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-primary"
|
||||
checked={chat.example}
|
||||
onChange={() => {
|
||||
chat.example = !chat.example;
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<label className="">{Tr("example")}</label>
|
||||
<input type="checkbox" checked={chat.example} />
|
||||
</span>
|
||||
<span
|
||||
onClick={(event: any) => setRenderWorkdown(!renderMarkdown)}
|
||||
>
|
||||
<label className="">{Tr("render")}</label>
|
||||
<input type="checkbox" checked={renderMarkdown} />
|
||||
</span>
|
||||
<span onClick={(event: any) => setRenderColor(!renderColor)}>
|
||||
<label className="">{Tr("color")}</label>
|
||||
<input type="checkbox" checked={renderColor} />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm font-medium">{Tr("example")}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-primary"
|
||||
checked={renderMarkdown}
|
||||
onChange={() => setRenderWorkdown(!renderMarkdown)}
|
||||
/>
|
||||
<span className="text-sm font-medium">{Tr("render")}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-primary"
|
||||
checked={renderColor}
|
||||
onChange={() => setRenderColor(!renderColor)}
|
||||
/>
|
||||
<span className="text-sm font-medium">{Tr("color")}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -68,6 +68,7 @@ import {
|
||||
ScissorsIcon,
|
||||
WholeWordIcon,
|
||||
EllipsisIcon,
|
||||
CogIcon,
|
||||
} from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
@@ -307,90 +308,95 @@ export function App() {
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
<SidebarInset>
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b">
|
||||
<header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b z-50">
|
||||
<div className="flex items-center gap-2 px-3">
|
||||
<SidebarTrigger />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<div className="dropdown lg:hidden flex items-center gap-2">
|
||||
<h1 className="text-lg font-bold">{chatStore.model}</h1>{" "}
|
||||
<Badge variant="outline">
|
||||
{chatStore.totalTokens.toString()}
|
||||
</Badge>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<EllipsisIcon />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<p>
|
||||
Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
|
||||
</p>
|
||||
<p>
|
||||
Cut(s): {chatStore.postBeginIndex}/
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</p>
|
||||
<p>
|
||||
Cost: ${chatStore.cost.toFixed(4)} / $
|
||||
{getTotalCost().toFixed(2)}
|
||||
</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="hidden lg:inline-grid">
|
||||
<Menubar>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<BoxesIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.model}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
{models[chatStore.model]?.price?.prompt * 1000 * 1000}$ /
|
||||
1M input tokens
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<ArrowUpDownIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>STREAM/FETCH</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<WholeWordIcon className="w-4 h-4 mr-2" />{" "}
|
||||
{chatStore.totalTokens}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>Max: {chatStore.maxTokens}</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<ScissorsIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.postBeginIndex}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
Max:{" "}
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<CircleDollarSignIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.cost.toFixed(4)}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
Accumulated: ${getTotalCost().toFixed(2)}
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<div>
|
||||
<div className="dropdown lg:hidden flex items-center gap-2">
|
||||
<h1 className="text-lg font-bold">{chatStore.model}</h1>{" "}
|
||||
<Badge variant="outline">
|
||||
{chatStore.totalTokens.toString()}
|
||||
</Badge>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<EllipsisIcon />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<p>
|
||||
Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
|
||||
</p>
|
||||
<p>
|
||||
Cut(s): {chatStore.postBeginIndex}/
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</p>
|
||||
<p>
|
||||
Cost: ${chatStore.cost.toFixed(4)} / $
|
||||
{getTotalCost().toFixed(2)}
|
||||
</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="hidden lg:inline-grid">
|
||||
<Menubar>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<BoxesIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.model}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
{models[chatStore.model]?.price?.prompt * 1000 * 1000}
|
||||
$ / 1M input tokens
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<ArrowUpDownIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>STREAM/FETCH</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<WholeWordIcon className="w-4 h-4 mr-2" />{" "}
|
||||
{chatStore.totalTokens}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>Max: {chatStore.maxTokens}</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<ScissorsIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.postBeginIndex}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
Max:{" "}
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>
|
||||
<CircleDollarSignIcon className="w-4 h-4 mr-2" />
|
||||
{chatStore.cost.toFixed(4)}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
Accumulated: ${getTotalCost().toFixed(2)}
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
</div>
|
||||
</div>
|
||||
<CogIcon />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -40,6 +40,16 @@ import VersionHint from "@/components/VersionHint";
|
||||
import StatusBar from "@/components/StatusBar";
|
||||
import WhisperButton from "@/components/WhisperButton";
|
||||
import AddToolMsg from "./AddToolMsg";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
ChatBubble,
|
||||
ChatBubbleAvatar,
|
||||
ChatBubbleMessage,
|
||||
ChatBubbleAction,
|
||||
ChatBubbleActionWrapper,
|
||||
} from "@/components/ui/chat/chat-bubble";
|
||||
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
|
||||
|
||||
export default function ChatBOX(props: {
|
||||
db: Promise<IDBPDatabase<ChatStore>>;
|
||||
@@ -436,7 +446,7 @@ export default function ChatBOX(props: {
|
||||
|
||||
return (
|
||||
<div className="grow flex flex-col p-2 w-full">
|
||||
{showSettings && (
|
||||
{true && (
|
||||
<Settings
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
@@ -532,128 +542,131 @@ export default function ChatBOX(props: {
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
<ChatMessageList>
|
||||
{chatStore.history.filter((msg) => !msg.example).length == 0 && (
|
||||
<div className="bg-base-200 break-all p-3 my-3 text-left">
|
||||
<h2>
|
||||
<span>{Tr("Saved prompt templates")}</span>
|
||||
<Button
|
||||
variant="link"
|
||||
className="mx-2"
|
||||
onClick={() => {
|
||||
chatStore.systemMessageContent = "";
|
||||
chatStore.toolsString = "";
|
||||
chatStore.history = [];
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr("Reset Current")}
|
||||
</Button>
|
||||
</h2>
|
||||
<div className="divider"></div>
|
||||
<div className="flex flex-wrap">
|
||||
<Templates
|
||||
templates={templates}
|
||||
setTemplates={setTemplates}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{chatStore.history.length === 0 && (
|
||||
<p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
|
||||
{Tr("No chat history here")}
|
||||
<br />⚙{Tr("Model")}: {chatStore.model}
|
||||
<br />⬆{Tr("Click above to change the settings of this chat")}
|
||||
<br />↖{Tr("Click the conor to create a new chat")}
|
||||
<br />⚠
|
||||
{Tr(
|
||||
"All chat history and settings are stored in the local browser"
|
||||
)}
|
||||
<br />
|
||||
</p>
|
||||
)}
|
||||
{chatStore.systemMessageContent.trim() && (
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-header">Prompt</div>
|
||||
<div
|
||||
className="chat-bubble chat-bubble-accent cursor-pointer message-content"
|
||||
onClick={() => setShowSettings(true)}
|
||||
>
|
||||
{chatStore.systemMessageContent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{chatStore.history.map((_, messageIndex) => (
|
||||
<Message
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
messageIndex={messageIndex}
|
||||
/>
|
||||
))}
|
||||
{showGenerating && (
|
||||
<p className="p-2 my-2 animate-pulse message-content">
|
||||
{generatingMessage || Tr("Generating...")}
|
||||
...
|
||||
</p>
|
||||
)}
|
||||
<p className="text-center">
|
||||
{chatStore.history.length > 0 && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="m-2"
|
||||
disabled={showGenerating}
|
||||
onClick={async () => {
|
||||
const messageIndex = chatStore.history.length - 1;
|
||||
if (chatStore.history[messageIndex].role === "assistant") {
|
||||
chatStore.history[messageIndex].hide = true;
|
||||
}
|
||||
|
||||
{chatStore.history.filter((msg) => !msg.example).length == 0 && (
|
||||
<div className="bg-base-200 break-all p-3 my-3 text-left">
|
||||
<h2>
|
||||
<span>{Tr("Saved prompt templates")}</span>
|
||||
<button
|
||||
className="mx-2 underline cursor-pointer"
|
||||
onClick={() => {
|
||||
chatStore.systemMessageContent = "";
|
||||
chatStore.toolsString = "";
|
||||
chatStore.history = [];
|
||||
setChatStore({ ...chatStore });
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Reset Current")}
|
||||
</button>
|
||||
</h2>
|
||||
<div className="divider"></div>
|
||||
<div className="flex flex-wrap">
|
||||
<Templates
|
||||
templates={templates}
|
||||
setTemplates={setTemplates}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{chatStore.history.length === 0 && (
|
||||
<p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
|
||||
{Tr("No chat history here")}
|
||||
<br />⚙{Tr("Model")}: {chatStore.model}
|
||||
<br />⬆{Tr("Click above to change the settings of this chat")}
|
||||
<br />↖{Tr("Click the conor to create a new chat")}
|
||||
<br />⚠
|
||||
{Tr(
|
||||
"All chat history and settings are stored in the local browser"
|
||||
{Tr("Re-Generate")}
|
||||
</Button>
|
||||
)}
|
||||
{chatStore.develop_mode && chatStore.history.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={showGenerating}
|
||||
onClick={async () => {
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Completion")}
|
||||
</Button>
|
||||
)}
|
||||
<br />
|
||||
</p>
|
||||
)}
|
||||
{chatStore.systemMessageContent.trim() && (
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-header">Prompt</div>
|
||||
<div
|
||||
className="chat-bubble chat-bubble-accent cursor-pointer message-content"
|
||||
onClick={() => setShowSettings(true)}
|
||||
>
|
||||
{chatStore.systemMessageContent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{chatStore.history.map((_, messageIndex) => (
|
||||
<Message
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
messageIndex={messageIndex}
|
||||
/>
|
||||
))}
|
||||
{showGenerating && (
|
||||
<p className="p-2 my-2 animate-pulse message-content">
|
||||
{generatingMessage || Tr("Generating...")}
|
||||
...
|
||||
<p className="p-2 my-2 text-center opacity-50 dark:text-white">
|
||||
{chatStore.postBeginIndex !== 0 && (
|
||||
<>
|
||||
<br />
|
||||
{Tr("Info: chat history is too long, forget messages")}:{" "}
|
||||
{chatStore.postBeginIndex}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-center">
|
||||
{chatStore.history.length > 0 && (
|
||||
<button
|
||||
className="btn btn-sm btn-warning disabled:line-through disabled:btn-neutral disabled:text-white m-2 p-2"
|
||||
disabled={showGenerating}
|
||||
onClick={async () => {
|
||||
const messageIndex = chatStore.history.length - 1;
|
||||
if (chatStore.history[messageIndex].role === "assistant") {
|
||||
chatStore.history[messageIndex].hide = true;
|
||||
}
|
||||
|
||||
//chatStore.totalTokens =
|
||||
setChatStore({ ...chatStore });
|
||||
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Re-Generate")}
|
||||
</button>
|
||||
<VersionHint chatStore={chatStore} />
|
||||
{showRetry && (
|
||||
<p className="text-right p-2 my-2 dark:text-white">
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
setShowRetry(false);
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Retry")}
|
||||
</Button>
|
||||
</p>
|
||||
)}
|
||||
{chatStore.develop_mode && chatStore.history.length > 0 && (
|
||||
<button
|
||||
className="btn btn-outline btn-sm btn-warning disabled:line-through disabled:bg-neural"
|
||||
disabled={showGenerating}
|
||||
onClick={async () => {
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Completion")}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
<p className="p-2 my-2 text-center opacity-50 dark:text-white">
|
||||
{chatStore.postBeginIndex !== 0 && (
|
||||
<>
|
||||
<br />
|
||||
{Tr("Info: chat history is too long, forget messages")}:{" "}
|
||||
{chatStore.postBeginIndex}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
<VersionHint chatStore={chatStore} />
|
||||
{showRetry && (
|
||||
<p className="text-right p-2 my-2 dark:text-white">
|
||||
<button
|
||||
className="p-1 rounded bg-rose-500"
|
||||
onClick={async () => {
|
||||
setShowRetry(false);
|
||||
await complete();
|
||||
}}
|
||||
>
|
||||
{Tr("Retry")}
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
<div ref={messagesEndRef}></div>
|
||||
<div ref={messagesEndRef}></div>
|
||||
</ChatMessageList>
|
||||
</div>
|
||||
{images.length > 0 && (
|
||||
<div className="flex flex-wrap">
|
||||
@@ -683,16 +696,17 @@ export default function ChatBOX(props: {
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between my-1">
|
||||
<button
|
||||
className="btn btn-primary disabled:line-through disabled:text-white disabled:bg-neutral m-1 p-1"
|
||||
<div className="sticky top-0 z-10 bg-background flex justify-between my-1 gap-2 p-2">
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
disabled={showGenerating || !chatStore.apiKey}
|
||||
onClick={() => {
|
||||
setShowAddImage(!showAddImage);
|
||||
}}
|
||||
>
|
||||
Image
|
||||
</button>
|
||||
</Button>
|
||||
{showAddImage && (
|
||||
<AddImage
|
||||
chatStore={chatStore}
|
||||
@@ -702,8 +716,8 @@ export default function ChatBOX(props: {
|
||||
setImages={setImages}
|
||||
/>
|
||||
)}
|
||||
<textarea
|
||||
autofocus
|
||||
<Textarea
|
||||
autoFocus
|
||||
value={inputMsg}
|
||||
ref={userInputRef}
|
||||
onChange={(event: any) => {
|
||||
@@ -711,7 +725,6 @@ export default function ChatBOX(props: {
|
||||
autoHeight(event.target);
|
||||
}}
|
||||
onKeyPress={(event: any) => {
|
||||
console.log(event);
|
||||
if (event.ctrlKey && event.code === "Enter") {
|
||||
send(event.target.value, true);
|
||||
setInputMsg("");
|
||||
@@ -722,14 +735,15 @@ export default function ChatBOX(props: {
|
||||
autoHeight(event.target);
|
||||
setInputMsg(event.target.value);
|
||||
}}
|
||||
className="textarea textarea-bordered textarea-sm grow w-0"
|
||||
className="min-h-[40px] flex-grow resize-none"
|
||||
placeholder="Type here..."
|
||||
style={{
|
||||
lineHeight: "1.39",
|
||||
}}
|
||||
placeholder="Type here..."
|
||||
></textarea>
|
||||
<button
|
||||
className="btn btn-primary disabled:btn-neutral disabled:line-through m-1 p-1"
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
disabled={showGenerating}
|
||||
onClick={() => {
|
||||
send(inputMsg, true);
|
||||
@@ -738,7 +752,7 @@ export default function ChatBOX(props: {
|
||||
}}
|
||||
>
|
||||
{Tr("Send")}
|
||||
</button>
|
||||
</Button>
|
||||
{chatStore.whisper_api && chatStore.whisper_key && (
|
||||
<WhisperButton
|
||||
chatStore={chatStore}
|
||||
@@ -747,8 +761,9 @@ export default function ChatBOX(props: {
|
||||
/>
|
||||
)}
|
||||
{chatStore.develop_mode && (
|
||||
<button
|
||||
className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={showGenerating || !chatStore.apiKey}
|
||||
onClick={() => {
|
||||
chatStore.history.push({
|
||||
@@ -768,29 +783,31 @@ export default function ChatBOX(props: {
|
||||
}}
|
||||
>
|
||||
{Tr("AI")}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{chatStore.develop_mode && (
|
||||
<button
|
||||
className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={showGenerating || !chatStore.apiKey}
|
||||
onClick={() => {
|
||||
send(inputMsg, false);
|
||||
}}
|
||||
>
|
||||
{Tr("User")}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{chatStore.develop_mode && (
|
||||
<button
|
||||
className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={showGenerating || !chatStore.apiKey}
|
||||
onClick={() => {
|
||||
setShowAddToolMsg(true);
|
||||
}}
|
||||
>
|
||||
{Tr("Tool")}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{showAddToolMsg && (
|
||||
<AddToolMsg
|
||||
|
||||
Reference in New Issue
Block a user