KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add blinking typing cursing (#619)

This commit is contained in:
Anthony Puppo 2023-04-20 10:33:28 -04:00 committed by GitHub
parent f849a2e924
commit fa3f6e93bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Chat/ChatLoader.tsx
View File

@ -1,5 +1,4 @@
import { IconRobot } from '@tabler/icons-react';
import { IconDots } from '@tabler/icons-react';
import { FC } from 'react';
interface Props { }
@ -14,7 +13,7 @@ export const ChatLoader: FC<Props> = () => {
<div className="min-w-[40px] items-end">
<IconRobot size={30} />
</div>
<IconDots className="animate-pulse" />
<span className="animate-pulse cursor-default mt-1">▍</span>
</div>
</div>
);

14
components/Chat/ChatMessage.tsx
View File

@ -33,7 +33,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
const { t } = useTranslation('chat');
const {
state: { selectedConversation, conversations, currentMessage },
state: { selectedConversation, conversations, currentMessage, messageIsStreaming },
dispatch: homeDispatch,
} = useContext(HomeContext);
@ -215,6 +215,14 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
rehypePlugins={[rehypeMathjax]}
components={{
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return <span className="animate-pulse cursor-default mt-1">▍</span>
}
children[0] = (children[0] as string).replace("`▍`", "▍")
}
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
@ -253,7 +261,9 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
},
}}
>
{message.content}
{`${message.content}${
messageIsStreaming && messageIndex == (selectedConversation?.messages.length ?? 0) - 1 ? '`▍`' : ''
}`}
</MemoizedReactMarkdown>
<div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">