feat: add inline block document previews (#637)
This commit is contained in:
Jeremy
GitHub
parent
b659dcce68
commit
bb03c516b5
24 changed files with 1122 additions and 805 deletions
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
import type { ChatRequestOptions, Message } from 'ai';
|
||||
import cx from 'classnames';
|
||||
import { motion } from 'framer-motion';
|
||||
import { memo, useState, type Dispatch, type SetStateAction } from 'react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { memo, useMemo, useState } from 'react';
|
||||
|
||||
import type { Vote } from '@/lib/db/schema';
|
||||
|
||||
import type { UIBlock } from './block';
|
||||
import { DocumentToolCall, DocumentToolResult } from './document';
|
||||
import { PencilEditIcon, SparklesIcon } from './icons';
|
||||
import { Markdown } from './markdown';
|
||||
|
|
@ -19,12 +18,11 @@ import { cn } from '@/lib/utils';
|
|||
import { Button } from './ui/button';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
|
||||
import { MessageEditor } from './message-editor';
|
||||
import { DocumentPreview } from './document-preview';
|
||||
|
||||
const PurePreviewMessage = ({
|
||||
chatId,
|
||||
message,
|
||||
block,
|
||||
setBlock,
|
||||
vote,
|
||||
isLoading,
|
||||
setMessages,
|
||||
|
|
@ -33,8 +31,6 @@ const PurePreviewMessage = ({
|
|||
}: {
|
||||
chatId: string;
|
||||
message: Message;
|
||||
block: UIBlock;
|
||||
setBlock: Dispatch<SetStateAction<UIBlock>>;
|
||||
vote: Vote | undefined;
|
||||
isLoading: boolean;
|
||||
setMessages: (
|
||||
|
|
@ -48,174 +44,162 @@ const PurePreviewMessage = ({
|
|||
const [mode, setMode] = useState<'view' | 'edit'>('view');
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="w-full mx-auto max-w-3xl px-4 group/message"
|
||||
initial={{ y: 5, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
data-role={message.role}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl',
|
||||
{
|
||||
'w-full': mode === 'edit',
|
||||
'group-data-[role=user]/message:w-fit': mode !== 'edit',
|
||||
},
|
||||
)}
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
className="w-full mx-auto max-w-3xl px-4 group/message"
|
||||
initial={{ y: 5, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
data-role={message.role}
|
||||
>
|
||||
{message.role === 'assistant' && (
|
||||
<div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border bg-background">
|
||||
<SparklesIcon size={14} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
{message.experimental_attachments && (
|
||||
<div className="flex flex-row justify-end gap-2">
|
||||
{message.experimental_attachments.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
key={attachment.url}
|
||||
attachment={attachment}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className={cn(
|
||||
'flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl',
|
||||
{
|
||||
'w-full': mode === 'edit',
|
||||
'group-data-[role=user]/message:w-fit': mode !== 'edit',
|
||||
},
|
||||
)}
|
||||
>
|
||||
{message.role === 'assistant' && (
|
||||
<div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border bg-background">
|
||||
<SparklesIcon size={14} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.content && mode === 'view' && (
|
||||
<div className="flex flex-row gap-2 items-start">
|
||||
{message.role === 'user' && !isReadonly && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="px-2 h-fit rounded-full text-muted-foreground opacity-0 group-hover/message:opacity-100"
|
||||
onClick={() => {
|
||||
setMode('edit');
|
||||
}}
|
||||
>
|
||||
<PencilEditIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Edit message</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn('flex flex-col gap-4', {
|
||||
'bg-primary text-primary-foreground px-3 py-2 rounded-xl':
|
||||
message.role === 'user',
|
||||
})}
|
||||
>
|
||||
<Markdown>{message.content as string}</Markdown>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
{message.experimental_attachments && (
|
||||
<div className="flex flex-row justify-end gap-2">
|
||||
{message.experimental_attachments.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
key={attachment.url}
|
||||
attachment={attachment}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{message.content && mode === 'edit' && (
|
||||
<div className="flex flex-row gap-2 items-start">
|
||||
<div className="size-8" />
|
||||
{message.content && mode === 'view' && (
|
||||
<div className="flex flex-row gap-2 items-start">
|
||||
{message.role === 'user' && !isReadonly && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="px-2 h-fit rounded-full text-muted-foreground opacity-0 group-hover/message:opacity-100"
|
||||
onClick={() => {
|
||||
setMode('edit');
|
||||
}}
|
||||
>
|
||||
<PencilEditIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Edit message</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<MessageEditor
|
||||
key={message.id}
|
||||
message={message}
|
||||
setMode={setMode}
|
||||
setMessages={setMessages}
|
||||
reload={reload}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn('flex flex-col gap-4', {
|
||||
'bg-primary text-primary-foreground px-3 py-2 rounded-xl':
|
||||
message.role === 'user',
|
||||
})}
|
||||
>
|
||||
<Markdown>{message.content as string}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.toolInvocations && message.toolInvocations.length > 0 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{message.toolInvocations.map((toolInvocation) => {
|
||||
const { toolName, toolCallId, state, args } = toolInvocation;
|
||||
{message.content && mode === 'edit' && (
|
||||
<div className="flex flex-row gap-2 items-start">
|
||||
<div className="size-8" />
|
||||
|
||||
if (state === 'result') {
|
||||
const { result } = toolInvocation;
|
||||
<MessageEditor
|
||||
key={message.id}
|
||||
message={message}
|
||||
setMode={setMode}
|
||||
setMessages={setMessages}
|
||||
reload={reload}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.toolInvocations && message.toolInvocations.length > 0 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{message.toolInvocations.map((toolInvocation) => {
|
||||
const { toolName, toolCallId, state, args } = toolInvocation;
|
||||
|
||||
if (state === 'result') {
|
||||
const { result } = toolInvocation;
|
||||
|
||||
return (
|
||||
<div key={toolCallId}>
|
||||
{toolName === 'getWeather' ? (
|
||||
<Weather weatherAtLocation={result} />
|
||||
) : toolName === 'createDocument' ? (
|
||||
<DocumentPreview
|
||||
isReadonly={isReadonly}
|
||||
result={result}
|
||||
/>
|
||||
) : toolName === 'updateDocument' ? (
|
||||
<DocumentToolResult
|
||||
type="update"
|
||||
result={result}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : toolName === 'requestSuggestions' ? (
|
||||
<DocumentToolResult
|
||||
type="request-suggestions"
|
||||
result={result}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : (
|
||||
<pre>{JSON.stringify(result, null, 2)}</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={toolCallId}>
|
||||
<div
|
||||
key={toolCallId}
|
||||
className={cx({
|
||||
skeleton: ['getWeather'].includes(toolName),
|
||||
})}
|
||||
>
|
||||
{toolName === 'getWeather' ? (
|
||||
<Weather weatherAtLocation={result} />
|
||||
<Weather />
|
||||
) : toolName === 'createDocument' ? (
|
||||
<DocumentToolResult
|
||||
type="create"
|
||||
result={result}
|
||||
block={block}
|
||||
setBlock={setBlock}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
<DocumentPreview isReadonly={isReadonly} args={args} />
|
||||
) : toolName === 'updateDocument' ? (
|
||||
<DocumentToolResult
|
||||
<DocumentToolCall
|
||||
type="update"
|
||||
result={result}
|
||||
block={block}
|
||||
setBlock={setBlock}
|
||||
args={args}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : toolName === 'requestSuggestions' ? (
|
||||
<DocumentToolResult
|
||||
<DocumentToolCall
|
||||
type="request-suggestions"
|
||||
result={result}
|
||||
block={block}
|
||||
setBlock={setBlock}
|
||||
args={args}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : (
|
||||
<pre>{JSON.stringify(result, null, 2)}</pre>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={toolCallId}
|
||||
className={cx({
|
||||
skeleton: ['getWeather'].includes(toolName),
|
||||
})}
|
||||
>
|
||||
{toolName === 'getWeather' ? (
|
||||
<Weather />
|
||||
) : toolName === 'createDocument' ? (
|
||||
<DocumentToolCall
|
||||
type="create"
|
||||
args={args}
|
||||
setBlock={setBlock}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : toolName === 'updateDocument' ? (
|
||||
<DocumentToolCall
|
||||
type="update"
|
||||
args={args}
|
||||
setBlock={setBlock}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : toolName === 'requestSuggestions' ? (
|
||||
<DocumentToolCall
|
||||
type="request-suggestions"
|
||||
args={args}
|
||||
setBlock={setBlock}
|
||||
isReadonly={isReadonly}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isReadonly && (
|
||||
<MessageActions
|
||||
key={`action-${message.id}`}
|
||||
chatId={chatId}
|
||||
message={message}
|
||||
vote={vote}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)}
|
||||
{!isReadonly && (
|
||||
<MessageActions
|
||||
key={`action-${message.id}`}
|
||||
chatId={chatId}
|
||||
message={message}
|
||||
vote={vote}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue