Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 10:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

⬤ style: Circular Streaming Cursor (#1736)

Browse source 
* Updated Style Cursor like ChatGPT

* style(Markdown.tsx): add space before cursor when there is text

* fix: revert OpenAIClient.tokens.js change

* fix:(Markdown.tsx): revert change of unused file

* fix(convos.spec.ts): test fix

* chore: remove raw HTML for cursor animations

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>
Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Raí Santos 2024-02-10 13:07:57 -03:00 • committed by GitHub
parent 92a41fbf47
commit a2e85b7053
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 75 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

68
client/src/components/Chat/Messages/Content/Markdown.tsx
View file

@ -1,14 +1,14 @@
import { useRecoilValue } from 'recoil';
import React, { useState, useEffect } from 'react';
import type { TMessage } from 'librechat-data-provider';
import rehypeHighlight from 'rehype-highlight';
import type { PluggableList } from 'unified';
import ReactMarkdown from 'react-markdown';
import supersub from 'remark-supersub';
import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';
import { memo } from 'react';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import remarkMath from 'remark-math';
import supersub from 'remark-supersub';
import rehypeKatex from 'rehype-katex';
import { useRecoilValue } from 'recoil';
import ReactMarkdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';
import type { TMessage } from 'librechat-data-provider';
import type { PluggableList } from 'unified';
import CodeBlock from '~/components/Messages/Content/CodeBlock';
import { langSubset, validateIframe, processLaTeX } from '~/utils';
import { useChatContext } from '~/Providers';
@ -26,7 +26,7 @@ type TContentProps = {
showCursor?: boolean;
};
const code = React.memo(({ inline, className, children }: TCodeProps) => {
const code = memo(({ inline, className, children }: TCodeProps) => {
const match = /language-(\w+)/.exec(className || '');
const lang = match && match[1];
@ -37,48 +37,25 @@ const code = React.memo(({ inline, className, children }: TCodeProps) => {
}
});
const p = React.memo(({ children }: { children: React.ReactNode }) => {
const p = memo(({ children }: { children: React.ReactNode }) => {
return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
});
const Markdown = React.memo(({ content, message, showCursor }: TContentProps) => {
const [cursor, setCursor] = useState('█');
const cursor = ' ⬤';
const Markdown = memo(({ content, message, showCursor }: TContentProps) => {
const { isSubmitting, latestMessage } = useChatContext();
const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
const isInitializing = content === '<span className="result-streaming">█</span>';
const isInitializing = content === '';
const { isEdited, messageId } = message ?? {};
const isLatestMessage = messageId === latestMessage?.messageId;
const _content = content?.replace('z-index: 1;', '') ?? '';
const currentContent = LaTeXParsing ? processLaTeX(_content) : _content;
useEffect(() => {
let timer1: NodeJS.Timeout, timer2: NodeJS.Timeout;
if (!showCursor) {
setCursor('ㅤ');
return;
}
if (isSubmitting && isLatestMessage) {
timer1 = setInterval(() => {
setCursor('ㅤ');
timer2 = setTimeout(() => {
setCursor('█');
}, 200);
}, 1000);
} else {
setCursor('ㅤ');
}
// This is the cleanup function that React will run when the component unmounts
return () => {
clearInterval(timer1);
clearTimeout(timer2);
};
}, [isSubmitting, isLatestMessage, showCursor]);
let currentContent = content;
if (!isInitializing) {
currentContent = currentContent?.replace('z-index: 1;', '') ?? '';
currentContent = LaTeXParsing ? processLaTeX(currentContent) : currentContent;
}
const rehypePlugins: PluggableList = [
[rehypeKatex, { output: 'mathml' }],
@ -93,6 +70,11 @@ const Markdown = React.memo(({ content, message, showCursor }: TContentProps) =>
[rehypeRaw],
];
if (isInitializing) {
rehypePlugins.pop();
return <span className="result-thinking" />;
}
let isValidIframe: string | boolean | null = false;
if (!isEdited) {
isValidIframe = validateIframe(currentContent);
@ -116,7 +98,7 @@ const Markdown = React.memo(({ content, message, showCursor }: TContentProps) =>
}
}
>
{isLatestMessage && isSubmitting && !isInitializing
{isLatestMessage && isSubmitting && !isInitializing && showCursor
? currentContent + cursor
: currentContent}
</ReactMarkdown>