mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
refactor: remove unused components and clean up ChatPanel layout
This commit is contained in:
dayuan.jiang
@@ -50,9 +50,6 @@ export default function Home() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
onClick={handleExport}
|
|
||||||
>export </Button>
|
|
||||||
<div className="w-1/3 p-1 border-gray-300">
|
<div className="w-1/3 p-1 border-gray-300">
|
||||||
<ChatPanel
|
<ChatPanel
|
||||||
onDisplayChart={(xml) => loadDiagram(xml)}
|
onDisplayChart={(xml) => loadDiagram(xml)}
|
||||||
|
|||||||
@@ -1,132 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import "@assistant-ui/react-markdown/styles/dot.css";
|
|
||||||
|
|
||||||
import {
|
|
||||||
CodeHeaderProps,
|
|
||||||
MarkdownTextPrimitive,
|
|
||||||
unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
|
|
||||||
useIsMarkdownCodeBlock,
|
|
||||||
} from "@assistant-ui/react-markdown";
|
|
||||||
import remarkGfm from "remark-gfm";
|
|
||||||
import { FC, memo, useState } from "react";
|
|
||||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
|
||||||
|
|
||||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
const MarkdownTextImpl = () => {
|
|
||||||
return (
|
|
||||||
<MarkdownTextPrimitive
|
|
||||||
remarkPlugins={[remarkGfm]}
|
|
||||||
className="aui-md"
|
|
||||||
components={defaultComponents}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MarkdownText = memo(MarkdownTextImpl);
|
|
||||||
|
|
||||||
const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
|
|
||||||
const { isCopied, copyToClipboard } = useCopyToClipboard();
|
|
||||||
const onCopy = () => {
|
|
||||||
if (!code || isCopied) return;
|
|
||||||
copyToClipboard(code);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
|
|
||||||
<span className="lowercase [&>span]:text-xs">{language}</span>
|
|
||||||
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
|
|
||||||
{!isCopied && <CopyIcon />}
|
|
||||||
{isCopied && <CheckIcon />}
|
|
||||||
</TooltipIconButton>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const useCopyToClipboard = ({
|
|
||||||
copiedDuration = 3000,
|
|
||||||
}: {
|
|
||||||
copiedDuration?: number;
|
|
||||||
} = {}) => {
|
|
||||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const copyToClipboard = (value: string) => {
|
|
||||||
if (!value) return;
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(value).then(() => {
|
|
||||||
setIsCopied(true);
|
|
||||||
setTimeout(() => setIsCopied(false), copiedDuration);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return { isCopied, copyToClipboard };
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultComponents = memoizeMarkdownComponents({
|
|
||||||
h1: ({ className, ...props }) => (
|
|
||||||
<h1 className={cn("mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
h2: ({ className, ...props }) => (
|
|
||||||
<h2 className={cn("mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
h3: ({ className, ...props }) => (
|
|
||||||
<h3 className={cn("mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
h4: ({ className, ...props }) => (
|
|
||||||
<h4 className={cn("mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
h5: ({ className, ...props }) => (
|
|
||||||
<h5 className={cn("my-4 text-lg font-semibold first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
h6: ({ className, ...props }) => (
|
|
||||||
<h6 className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
p: ({ className, ...props }) => (
|
|
||||||
<p className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)} {...props} />
|
|
||||||
),
|
|
||||||
a: ({ className, ...props }) => (
|
|
||||||
<a className={cn("text-primary font-medium underline underline-offset-4", className)} {...props} />
|
|
||||||
),
|
|
||||||
blockquote: ({ className, ...props }) => (
|
|
||||||
<blockquote className={cn("border-l-2 pl-6 italic", className)} {...props} />
|
|
||||||
),
|
|
||||||
ul: ({ className, ...props }) => (
|
|
||||||
<ul className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)} {...props} />
|
|
||||||
),
|
|
||||||
ol: ({ className, ...props }) => (
|
|
||||||
<ol className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)} {...props} />
|
|
||||||
),
|
|
||||||
hr: ({ className, ...props }) => (
|
|
||||||
<hr className={cn("my-5 border-b", className)} {...props} />
|
|
||||||
),
|
|
||||||
table: ({ className, ...props }) => (
|
|
||||||
<table className={cn("my-5 w-full border-separate border-spacing-0 overflow-y-auto", className)} {...props} />
|
|
||||||
),
|
|
||||||
th: ({ className, ...props }) => (
|
|
||||||
<th className={cn("bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} />
|
|
||||||
),
|
|
||||||
td: ({ className, ...props }) => (
|
|
||||||
<td className={cn("border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} />
|
|
||||||
),
|
|
||||||
tr: ({ className, ...props }) => (
|
|
||||||
<tr className={cn("m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", className)} {...props} />
|
|
||||||
),
|
|
||||||
sup: ({ className, ...props }) => (
|
|
||||||
<sup className={cn("[&>a]:text-xs [&>a]:no-underline", className)} {...props} />
|
|
||||||
),
|
|
||||||
pre: ({ className, ...props }) => (
|
|
||||||
<pre className={cn("overflow-x-auto rounded-b-lg bg-black p-4 text-white", className)} {...props} />
|
|
||||||
),
|
|
||||||
code: function Code({ className, ...props }) {
|
|
||||||
const isCodeBlock = useIsMarkdownCodeBlock();
|
|
||||||
return (
|
|
||||||
<code
|
|
||||||
className={cn(!isCodeBlock && "bg-muted rounded border font-semibold", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
CodeHeader,
|
|
||||||
});
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
import type { FC } from "react";
|
|
||||||
import {
|
|
||||||
ThreadListItemPrimitive,
|
|
||||||
ThreadListPrimitive,
|
|
||||||
} from "@assistant-ui/react";
|
|
||||||
import { ArchiveIcon, PlusIcon } from "lucide-react";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
|
||||||
|
|
||||||
export const ThreadList: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5">
|
|
||||||
<ThreadListNew />
|
|
||||||
<ThreadListItems />
|
|
||||||
</ThreadListPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadListNew: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadListPrimitive.New asChild>
|
|
||||||
<Button className="data-[active]:bg-muted hover:bg-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start" variant="ghost">
|
|
||||||
<PlusIcon />
|
|
||||||
New Thread
|
|
||||||
</Button>
|
|
||||||
</ThreadListPrimitive.New>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadListItems: FC = () => {
|
|
||||||
return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadListItem: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadListItemPrimitive.Root className="data-[active]:bg-muted hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2">
|
|
||||||
<ThreadListItemPrimitive.Trigger className="flex-grow px-3 py-2 text-start">
|
|
||||||
<ThreadListItemTitle />
|
|
||||||
</ThreadListItemPrimitive.Trigger>
|
|
||||||
<ThreadListItemArchive />
|
|
||||||
</ThreadListItemPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadListItemTitle: FC = () => {
|
|
||||||
return (
|
|
||||||
<p className="text-sm">
|
|
||||||
<ThreadListItemPrimitive.Title fallback="New Chat" />
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadListItemArchive: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadListItemPrimitive.Archive asChild>
|
|
||||||
<TooltipIconButton
|
|
||||||
className="hover:text-primary text-foreground ml-auto mr-3 size-4 p-0"
|
|
||||||
variant="ghost"
|
|
||||||
tooltip="Archive thread"
|
|
||||||
>
|
|
||||||
<ArchiveIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ThreadListItemPrimitive.Archive>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,287 +0,0 @@
|
|||||||
import {
|
|
||||||
ActionBarPrimitive,
|
|
||||||
BranchPickerPrimitive,
|
|
||||||
ComposerPrimitive,
|
|
||||||
MessagePrimitive,
|
|
||||||
ThreadPrimitive,
|
|
||||||
} from "@assistant-ui/react";
|
|
||||||
import type { FC } from "react";
|
|
||||||
import {
|
|
||||||
ArrowDownIcon,
|
|
||||||
CheckIcon,
|
|
||||||
ChevronLeftIcon,
|
|
||||||
ChevronRightIcon,
|
|
||||||
CopyIcon,
|
|
||||||
PencilIcon,
|
|
||||||
RefreshCwIcon,
|
|
||||||
SendHorizontalIcon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
|
|
||||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
|
||||||
|
|
||||||
export const Thread: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadPrimitive.Root
|
|
||||||
className="bg-background box-border flex h-full flex-col overflow-hidden"
|
|
||||||
style={{
|
|
||||||
["--thread-max-width" as string]: "42rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8">
|
|
||||||
<ThreadWelcome />
|
|
||||||
|
|
||||||
<ThreadPrimitive.Messages
|
|
||||||
components={{
|
|
||||||
UserMessage: UserMessage,
|
|
||||||
EditComposer: EditComposer,
|
|
||||||
AssistantMessage: AssistantMessage,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ThreadPrimitive.If empty={false}>
|
|
||||||
<div className="min-h-8 flex-grow" />
|
|
||||||
</ThreadPrimitive.If>
|
|
||||||
|
|
||||||
<div className="sticky bottom-0 mt-3 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
|
|
||||||
<ThreadScrollToBottom />
|
|
||||||
<Composer />
|
|
||||||
</div>
|
|
||||||
</ThreadPrimitive.Viewport>
|
|
||||||
</ThreadPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadScrollToBottom: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadPrimitive.ScrollToBottom asChild>
|
|
||||||
<TooltipIconButton
|
|
||||||
tooltip="Scroll to bottom"
|
|
||||||
variant="outline"
|
|
||||||
className="absolute -top-8 rounded-full disabled:invisible"
|
|
||||||
>
|
|
||||||
<ArrowDownIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ThreadPrimitive.ScrollToBottom>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadWelcome: FC = () => {
|
|
||||||
return (
|
|
||||||
<ThreadPrimitive.Empty>
|
|
||||||
<div className="flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col">
|
|
||||||
<div className="flex w-full flex-grow flex-col items-center justify-center">
|
|
||||||
<p className="mt-4 font-medium">
|
|
||||||
How can I help you today?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{/* <ThreadWelcomeSuggestions /> */}
|
|
||||||
</div>
|
|
||||||
</ThreadPrimitive.Empty>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThreadWelcomeSuggestions: FC = () => {
|
|
||||||
return (
|
|
||||||
<div className="mt-3 flex w-full items-stretch justify-center gap-4">
|
|
||||||
<ThreadPrimitive.Suggestion
|
|
||||||
className="hover:bg-muted/80 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-lg border p-3 transition-colors ease-in"
|
|
||||||
prompt="What is the weather in Tokyo?"
|
|
||||||
method="replace"
|
|
||||||
autoSend
|
|
||||||
>
|
|
||||||
<span className="line-clamp-2 text-ellipsis text-sm font-semibold">
|
|
||||||
What is the weather in Tokyo?
|
|
||||||
</span>
|
|
||||||
</ThreadPrimitive.Suggestion>
|
|
||||||
<ThreadPrimitive.Suggestion
|
|
||||||
className="hover:bg-muted/80 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-lg border p-3 transition-colors ease-in"
|
|
||||||
prompt="What is assistant-ui?"
|
|
||||||
method="replace"
|
|
||||||
autoSend
|
|
||||||
>
|
|
||||||
<span className="line-clamp-2 text-ellipsis text-sm font-semibold">
|
|
||||||
What is assistant-ui?
|
|
||||||
</span>
|
|
||||||
</ThreadPrimitive.Suggestion>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Composer: FC = () => {
|
|
||||||
return (
|
|
||||||
<ComposerPrimitive.Root className="focus-within:border-ring/20 flex w-full flex-wrap items-end rounded-lg border bg-inherit px-2.5 shadow-sm transition-colors ease-in">
|
|
||||||
<ComposerPrimitive.Input
|
|
||||||
rows={1}
|
|
||||||
autoFocus
|
|
||||||
placeholder="Write a message..."
|
|
||||||
className="placeholder:text-muted-foreground max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed"
|
|
||||||
/>
|
|
||||||
<ComposerAction />
|
|
||||||
</ComposerPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ComposerAction: FC = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ThreadPrimitive.If running={false}>
|
|
||||||
<ComposerPrimitive.Send asChild>
|
|
||||||
<TooltipIconButton
|
|
||||||
tooltip="Send"
|
|
||||||
variant="default"
|
|
||||||
className="my-2.5 size-8 p-2 transition-opacity ease-in"
|
|
||||||
>
|
|
||||||
<SendHorizontalIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ComposerPrimitive.Send>
|
|
||||||
</ThreadPrimitive.If>
|
|
||||||
<ThreadPrimitive.If running>
|
|
||||||
<ComposerPrimitive.Cancel asChild>
|
|
||||||
<TooltipIconButton
|
|
||||||
tooltip="Cancel"
|
|
||||||
variant="default"
|
|
||||||
className="my-2.5 size-8 p-2 transition-opacity ease-in"
|
|
||||||
>
|
|
||||||
<CircleStopIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ComposerPrimitive.Cancel>
|
|
||||||
</ThreadPrimitive.If>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const UserMessage: FC = () => {
|
|
||||||
return (
|
|
||||||
<MessagePrimitive.Root className="grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&:where(>*)]:col-start-2 w-full max-w-[var(--thread-max-width)] py-4">
|
|
||||||
<UserActionBar />
|
|
||||||
|
|
||||||
<div className="bg-muted text-foreground max-w-[calc(var(--thread-max-width)*0.8)] break-words rounded-3xl px-5 py-2.5 col-start-2 row-start-2">
|
|
||||||
<MessagePrimitive.Content />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BranchPicker className="col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
|
|
||||||
</MessagePrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const UserActionBar: FC = () => {
|
|
||||||
return (
|
|
||||||
<ActionBarPrimitive.Root
|
|
||||||
hideWhenRunning
|
|
||||||
autohide="not-last"
|
|
||||||
className="flex flex-col items-end col-start-1 row-start-2 mr-3 mt-2.5"
|
|
||||||
>
|
|
||||||
<ActionBarPrimitive.Edit asChild>
|
|
||||||
<TooltipIconButton tooltip="Edit">
|
|
||||||
<PencilIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ActionBarPrimitive.Edit>
|
|
||||||
</ActionBarPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const EditComposer: FC = () => {
|
|
||||||
return (
|
|
||||||
<ComposerPrimitive.Root className="bg-muted my-4 flex w-full max-w-[var(--thread-max-width)] flex-col gap-2 rounded-xl">
|
|
||||||
<ComposerPrimitive.Input className="text-foreground flex h-8 w-full resize-none bg-transparent p-4 pb-0 outline-none" />
|
|
||||||
|
|
||||||
<div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
|
|
||||||
<ComposerPrimitive.Cancel asChild>
|
|
||||||
<Button variant="ghost">Cancel</Button>
|
|
||||||
</ComposerPrimitive.Cancel>
|
|
||||||
<ComposerPrimitive.Send asChild>
|
|
||||||
<Button>Send</Button>
|
|
||||||
</ComposerPrimitive.Send>
|
|
||||||
</div>
|
|
||||||
</ComposerPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const AssistantMessage: FC = () => {
|
|
||||||
return (
|
|
||||||
<MessagePrimitive.Root className="grid grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] relative w-full max-w-[var(--thread-max-width)] py-4">
|
|
||||||
<div className="text-foreground max-w-[calc(var(--thread-max-width)*0.8)] break-words leading-7 col-span-2 col-start-2 row-start-1 my-1.5">
|
|
||||||
<MessagePrimitive.Content components={{ Text: MarkdownText }} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AssistantActionBar />
|
|
||||||
|
|
||||||
<BranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
|
|
||||||
</MessagePrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const AssistantActionBar: FC = () => {
|
|
||||||
return (
|
|
||||||
<ActionBarPrimitive.Root
|
|
||||||
hideWhenRunning
|
|
||||||
autohide="not-last"
|
|
||||||
autohideFloat="single-branch"
|
|
||||||
className="text-muted-foreground flex gap-1 col-start-3 row-start-2 -ml-1 data-[floating]:bg-background data-[floating]:absolute data-[floating]:rounded-md data-[floating]:border data-[floating]:p-1 data-[floating]:shadow-sm"
|
|
||||||
>
|
|
||||||
<ActionBarPrimitive.Copy asChild>
|
|
||||||
<TooltipIconButton tooltip="Copy">
|
|
||||||
<MessagePrimitive.If copied>
|
|
||||||
<CheckIcon />
|
|
||||||
</MessagePrimitive.If>
|
|
||||||
<MessagePrimitive.If copied={false}>
|
|
||||||
<CopyIcon />
|
|
||||||
</MessagePrimitive.If>
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ActionBarPrimitive.Copy>
|
|
||||||
<ActionBarPrimitive.Reload asChild>
|
|
||||||
<TooltipIconButton tooltip="Refresh">
|
|
||||||
<RefreshCwIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</ActionBarPrimitive.Reload>
|
|
||||||
</ActionBarPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
|
|
||||||
className,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<BranchPickerPrimitive.Root
|
|
||||||
hideWhenSingleBranch
|
|
||||||
className={cn(
|
|
||||||
"text-muted-foreground inline-flex items-center text-xs",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<BranchPickerPrimitive.Previous asChild>
|
|
||||||
<TooltipIconButton tooltip="Previous">
|
|
||||||
<ChevronLeftIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</BranchPickerPrimitive.Previous>
|
|
||||||
<span className="font-medium">
|
|
||||||
<BranchPickerPrimitive.Number /> /{" "}
|
|
||||||
<BranchPickerPrimitive.Count />
|
|
||||||
</span>
|
|
||||||
<BranchPickerPrimitive.Next asChild>
|
|
||||||
<TooltipIconButton tooltip="Next">
|
|
||||||
<ChevronRightIcon />
|
|
||||||
</TooltipIconButton>
|
|
||||||
</BranchPickerPrimitive.Next>
|
|
||||||
</BranchPickerPrimitive.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CircleStopIcon = () => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="currentColor"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
>
|
|
||||||
<rect width="10" height="10" x="3" y="3" rx="2" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { ComponentPropsWithoutRef, forwardRef } from "react";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "@/components/ui/tooltip";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
|
|
||||||
tooltip: string;
|
|
||||||
side?: "top" | "bottom" | "left" | "right";
|
|
||||||
};
|
|
||||||
|
|
||||||
export const TooltipIconButton = forwardRef<
|
|
||||||
HTMLButtonElement,
|
|
||||||
TooltipIconButtonProps
|
|
||||||
>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
|
|
||||||
return (
|
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
{...rest}
|
|
||||||
className={cn("size-6 p-1", className)}
|
|
||||||
ref={ref}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<span className="sr-only">{tooltip}</span>
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent side={side}>{tooltip}</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
TooltipIconButton.displayName = "TooltipIconButton";
|
|
||||||
@@ -9,7 +9,6 @@ import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/componen
|
|||||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
import { Loader2, Send } from "lucide-react"
|
import { Loader2, Send } from "lucide-react"
|
||||||
import { useChat } from '@ai-sdk/react';
|
import { useChat } from '@ai-sdk/react';
|
||||||
import { ToolInvocation } from 'ai';
|
|
||||||
|
|
||||||
interface ChatPanelProps {
|
interface ChatPanelProps {
|
||||||
onDisplayChart: (xml: string) => void;
|
onDisplayChart: (xml: string) => void;
|
||||||
@@ -112,7 +111,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="h-full flex flex-col">
|
<Card className="h-full flex flex-col rounded-none">
|
||||||
<CardHeader className="pb-2">
|
<CardHeader className="pb-2">
|
||||||
<CardTitle>Chat with Diagram Generator</CardTitle>
|
<CardTitle>Chat with Diagram Generator</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|||||||
Reference in New Issue
Block a user