Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refactor to use parts #813

Merged
merged 6 commits into from
Feb 19, 2025
Merged

feat: refactor to use parts #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f0dd1f
refactor to message parts
nicoalbanese Feb 19, 2025
d990e8e
update to latest ai version
jeremyphilemon Feb 19, 2025
084696a
use pnpm v9
jeremyphilemon Feb 19, 2025
1228c87
format
jeremyphilemon Feb 19, 2025
10444c4
remove packageManager field in package.json
jeremyphilemon Feb 19, 2025
8112448
remove comment
jeremyphilemon Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 78 additions & 70 deletions components/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,12 @@
import type { ChatRequestOptions, Message } from 'ai';
import cx from 'classnames';
import { AnimatePresence, motion } from 'framer-motion';
import { memo, useMemo, useState } from 'react';
import { memo, useState } from 'react';

import type { Vote } from '@/lib/db/schema';

import { DocumentToolCall, DocumentToolResult } from './document';
import {
ChevronDownIcon,
LoaderIcon,
PencilEditIcon,
SparklesIcon,
} from './icons';
import { PencilEditIcon, SparklesIcon } from './icons';
import { Markdown } from './markdown';
import { MessageActions } from './message-actions';
import { PreviewAttachment } from './preview-attachment';
Expand Down Expand Up @@ -90,72 +85,84 @@ const PurePreviewMessage = ({
</div>
)}

{message.reasoning && (
<MessageReasoning
isLoading={isLoading}
reasoning={message.reasoning}
/>
)}

{(message.content || message.reasoning) && 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={() => {
if (!user) {
toast.error(
'You must be signed in to edit messages!',
);

return;
}

setMode('edit');
}}
{message.parts?.map((p, i) => {
const key = `message-${message.id}-part-${i}`;
switch (p.type) {
case 'text':
if (mode === 'view') {
return (
<div
key={key}
className="flex flex-row gap-2 items-start"
>
<PencilEditIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Edit message</TooltipContent>
</Tooltip>
)}
{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={() => {
if (!user) {
toast.error(
'You must be signed in to edit messages!',
);

<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.content && mode === 'edit' && (
<div className="flex flex-row gap-2 items-start">
<div className="size-8" />
return;
}

<MessageEditor
key={message.id}
message={message}
setMode={setMode}
setMessages={setMessages}
reload={reload}
/>
</div>
)}
setMode('edit');
}}
>
<PencilEditIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Edit message</TooltipContent>
</Tooltip>
)}

{message.toolInvocations && message.toolInvocations.length > 0 && (
<div className="flex flex-col gap-4">
{message.toolInvocations.map((toolInvocation) => {
const { toolName, toolCallId, state, args } = toolInvocation;
<div
className={cn('flex flex-col gap-4', {
'bg-primary text-primary-foreground px-3 py-2 rounded-xl':
message.role === 'user',
})}
>
<Markdown>{p.text}</Markdown>
</div>
</div>
);
}
if (mode === 'edit') {
return (
<div
key={key}
className="flex flex-row gap-2 items-start"
>
<div className="size-8" />

<MessageEditor
key={message.id}
message={message}
setMode={setMode}
setMessages={setMessages}
reload={reload}
/>
</div>
);
}
return null;
case 'reasoning':
return (
<MessageReasoning
key={key}
isLoading={isLoading}
reasoning={p.reasoning}
/>
);
case 'tool-invocation':
const { toolName, toolCallId, state, args } =
p.toolInvocation;
if (state === 'result') {
const { result } = toolInvocation;
const { result } = p.toolInvocation;

return (
<div key={toolCallId}>
Expand Down Expand Up @@ -210,9 +217,10 @@ const PurePreviewMessage = ({
) : null}
</div>
);
})}
</div>
)}
default:
return null;
}
})}

{!isReadonly && (
<MessageActions
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"@vercel/functions": "^1.4.2",
"@vercel/kv": "^3.0.0",
"@vercel/postgres": "^0.10.0",
"ai": "4.1.17",
"ai": "4.1.44",
"bcrypt-ts": "^5.0.2",
"class-variance-authority": "^0.7.0",
"classnames": "^2.5.1",
Expand Down
64 changes: 45 additions & 19 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.