Spaces:
Running
Running
File size: 4,853 Bytes
3ba9c0c 52b4c36 3ba9c0c 0d6f04b 52b4c36 c69ef3e 052672d c69ef3e a86b547 96ac62a 3a22cf3 0d6f04b 5613eec 3ba9c0c a86b547 5613eec 3ba9c0c 5613eec 0d6f04b f80b091 154a1e7 f0f12a9 154a1e7 f0f12a9 154a1e7 f665131 154a1e7 f665131 154a1e7 f80b091 154a1e7 f80b091 154a1e7 3ba9c0c 154a1e7 3ba9c0c f80b091 154a1e7 f80b091 154a1e7 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 |
// 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 && (
<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}
/>
);
},
}}
>
{logs}
</MemoizedReactMarkdown>
)}
{/* <ChatMessageActions message={message} /> */}
{isLoading && <Loading />}
</div>
</div>
);
}
|