Spaces:
Running
Running
File size: 5,433 Bytes
3ba9c0c 52b4c36 3ba9c0c 0d6f04b 52b4c36 c69ef3e 052672d c69ef3e a86b547 96ac62a 3a22cf3 0d6f04b 5613eec 3ba9c0c a86b547 5613eec 3ba9c0c 5613eec 0d6f04b f80b091 f0f12a9 bfbf1a7 f0f12a9 f80b091 38448fc f80b091 3a22cf3 f0f12a9 f80b091 3a22cf3 f665131 3a22cf3 96ac62a 3a22cf3 96ac62a 3a22cf3 f80b091 3ba9c0c f80b091 3ba9c0c f80b091 3ba9c0c f80b091 f0f12a9 f80b091 96ac62a 5613eec 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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
// 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 { useMemo } from 'react';
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 { MessageBase } from '../../lib/types';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/Tooltip';
import Img from '../ui/Img';
import { getCleanedUpMessages } from '@/lib/messageUtils';
import Loading from '../ui/Loading';
export interface ChatMessageProps {
message: MessageBase;
isLoading: boolean;
}
export function ChatMessage({
message,
isLoading,
...props
}: ChatMessageProps) {
const { logs, content } = useMemo(() => {
return getCleanedUpMessages({
content: message.content,
role: message.role,
});
}, [message.content, message.role]);
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, ...props }) {
if (
props.node.children.some(
child => child.type === 'element' && child.tagName === 'img',
)
) {
return (
<p className="flex flex-wrap gap-2 items-start">{children}</p>
);
}
return (
<p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
);
},
img(props) {
if (props.src?.endsWith('.mp4')) {
return (
<video src={props.src} controls width={500} height={500} />
);
}
return (
<Tooltip>
<TooltipTrigger asChild>
<Img
src={props.src ?? '/landing.png'}
alt={props.alt ?? 'answer-image'}
quality={100}
className="cursor-zoom-in"
sizes="(min-width: 66em) 25vw,
(min-width: 44em) 40vw,
100vw"
/>
</TooltipTrigger>
<TooltipContent>
<Img
className="m-2"
src={props.src ?? '/landing.png'}
alt={props.alt ?? 'answer-image'}
quality={100}
width={500}
/>
</TooltipContent>
</Tooltip>
);
},
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} /> */}
{isLoading && <Loading />}
</div>
</div>
);
}
|