dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add thinking placeholder message (#496)

Browse source
This commit is contained in:
Jeremy 2024-11-06 15:21:28 +03:00 • committed by GitHub
parent 0001c24d09
commit b5c165714b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 67 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/custom/message.tsx
View file

@ -3,13 +3,13 @@
import { Message } from 'ai';
import cx from 'classnames';
import { motion } from 'framer-motion';
import { Sparkles } from 'lucide-react';
import { Dispatch, SetStateAction } from 'react';
import { Vote } from '@/db/schema';
import { UICanvas } from './canvas';
import { DocumentToolCall, DocumentToolResult } from './document';
import { SparklesIcon } from './icons';
import { Markdown } from './markdown';
import { MessageActions } from './message-actions';
import { PreviewAttachment } from './preview-attachment';
@ -49,7 +49,7 @@ export const PreviewMessage = ({
>
{message.role === 'assistant' && (
<div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
<Sparkles className="size-4" />
<SparklesIcon size={14} />
</div>
)}
@ -148,3 +148,35 @@ export const PreviewMessage = ({
</motion.div>
);
};
export const ThinkingMessage = () => {
const role = 'assistant';
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, transition: { delay: 1 } }}
data-role={role}
>
<div
className={cx(
'flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl',
{
'group-data-[role=user]/message:bg-muted': true,
}
)}
>
<div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
<SparklesIcon size={14} />
</div>
<div className="flex flex-col gap-2 w-full">
<div className="flex flex-col gap-4 text-muted-foreground">
Thinking...
</div>
</div>
</div>
</motion.div>
);
};