Spaces:
Running
Running
File size: 3,688 Bytes
3ba9c0c 52b4c36 3ba9c0c 52b4c36 c69ef3e 052672d c69ef3e 052672d a86b547 6b8f69a 3ba9c0c a86b547 3ba9c0c 6b8f69a f80b091 f0f12a9 973f0d8 f0f12a9 f80b091 38448fc f80b091 f0f12a9 f80b091 3ba9c0c f80b091 3ba9c0c f80b091 3ba9c0c f80b091 f0f12a9 f80b091 3ba9c0c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
// Inspired by Chatbot-UI and modified to fit the needs of this project
// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import { cn } from '@/lib/utils';
import { CodeBlock } from '@/components/ui/CodeBlock';
import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
import { IconOpenAI, IconUser } from '@/components/ui/Icons';
import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
import { MessageBase } from '../../lib/types';
import { useCleanedUpMessages } from '@/lib/hooks/useCleanedUpMessages';
export interface ChatMessageProps {
message: MessageBase;
}
export function ChatMessage({ message, ...props }: ChatMessageProps) {
const { logs, content } = useCleanedUpMessages(message);
return (
<div className={cn('group relative mb-4 flex items-start')} {...props}>
<div
className={cn(
'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
message.role === 'user'
? 'bg-background'
: 'bg-primary text-primary-foreground',
)}
>
{message.role === 'user' ? <IconUser /> : <IconOpenAI />}
</div>
<div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
{logs && message.role !== 'user' && (
<div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-auto">
<div className="text-xl font-bold">Thinking Process</div>
<MemoizedReactMarkdown
className="break-words text-sm"
remarkPlugins={[remarkGfm, remarkMath]}
components={{
p({ children }) {
return (
<p className="my-2 last:mb-0 whitespace-pre-line">
{children}
</p>
);
},
code({ children, ...props }) {
return (
<code className="whitespace-pre-line">{children}</code>
);
},
}}
>
{logs}
</MemoizedReactMarkdown>
</div>
)}
<MemoizedReactMarkdown
className="break-words"
remarkPlugins={[remarkGfm, remarkMath]}
components={{
p({ children }) {
return (
<p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
);
},
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return (
<span className="mt-1 cursor-default animate-pulse">▍</span>
);
}
children[0] = (children[0] as string).replace('`▍`', '▍');
}
const match = /language-(\w+)/.exec(className || '');
if (inline) {
return (
<code className={className} {...props}>
{children}
</code>
);
}
return (
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
);
},
}}
>
{content}
</MemoizedReactMarkdown>
<ChatMessageActions message={message} />
</div>
</div>
);
}
|