LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 09:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fix/mermaid loading): load only the diagrams which stream

Browse Source
This commit is contained in:
ManishMadan2882
2025-05-06 15:16:14 +05:30
parent 72e51bb072
commit f37ca95c10
4 changed files with 73 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -53,6 +53,7 @@ const ConversationBubble = forwardRef<
toolCalls?: ToolCallsType[];
retryBtn?: React.ReactElement;
questionNumber?: number;
isStreaming?: boolean;
handleUpdatedQuestionSubmission?: (
updatedquestion?: string,
updated?: boolean,
@@ -71,6 +72,7 @@ const ConversationBubble = forwardRef<
toolCalls,
retryBtn,
questionNumber,
isStreaming,
handleUpdatedQuestionSubmission,
},
ref,
@@ -195,29 +197,29 @@ const ConversationBubble = forwardRef<
};
const processMarkdownContent = (content: string) => {
const processedContent = preprocessLaTeX(content);
const contentSegments: Array<{type: 'text' | 'mermaid', content: string}> = [];
let lastIndex = 0;
const regex = /```mermaid\n([\s\S]*?)```/g;
let match;
while ((match = regex.exec(processedContent)) !== null) {
const textBefore = processedContent.substring(lastIndex, match.index);
if (textBefore) {
contentSegments.push({ type: 'text', content: textBefore });
}
contentSegments.push({ type: 'mermaid', content: match[1].trim() });
lastIndex = match.index + match[0].length;
}
const textAfter = processedContent.substring(lastIndex);
if (textAfter) {
contentSegments.push({ type: 'text', content: textAfter });
}
return contentSegments;
};
bubble = (
@@ -404,7 +406,7 @@ const ConversationBubble = forwardRef<
const { children, className, node, ref, ...rest } = props;
const match = /language-(\w+)/.exec(className || '');
const language = match ? match[1] : '';
return match ? (
<div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
<div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
@@ -491,6 +493,7 @@ const ConversationBubble = forwardRef<
<div className="my-4 w-full" style={{ minWidth: '100%' }}>
<MermaidRenderer
code={segment.content}
isLoading={isStreaming}
/>
</div>
)}
@@ -505,7 +508,7 @@ const ConversationBubble = forwardRef<
{message && (
<div className="my-2 ml-2 flex justify-start">
<div
className={`relative mr-2 block items-center justify-center lg:invisible
className={`relative mr-2 block items-center justify-center lg:invisible
${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
>
<div>
@@ -513,7 +516,7 @@ const ConversationBubble = forwardRef<
</div>
</div>
<div
className={`relative mr-2 block items-center justify-center lg:invisible
className={`relative mr-2 block items-center justify-center lg:invisible
${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
>
<div>
@@ -544,7 +547,7 @@ const ConversationBubble = forwardRef<
}`}
>
<Like
className={`cursor-pointer
className={`cursor-pointer
${
isLikeClicked || feedback === 'LIKE'
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'

6
frontend/src/conversation/ConversationMessages.tsx
View File

@@ -40,7 +40,7 @@ export default function ConversationMessages({
const conversationRef = useRef<HTMLDivElement>(null);
const atLast = useRef(true);
const [eventInterrupt, setEventInterrupt] = useState(false);
const handleUserInterruption = () => {
if (!eventInterrupt && status === 'loading') {
setEventInterrupt(true);
@@ -54,7 +54,7 @@ export default function ConversationMessages({
setTimeout(() => {
if (!conversationRef?.current) return;
if (status === 'idle' || !queries[queries.length - 1]?.response) {
conversationRef.current.scrollTo({
behavior: 'smooth',
@@ -93,6 +93,7 @@ export default function ConversationMessages({
const prepResponseView = (query: Query, index: number) => {
let responseView;
if (query.thought || query.response) {
const isCurrentlyStreaming = status === 'loading' && index === queries.length - 1;
responseView = (
<ConversationBubble
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
@@ -103,6 +104,7 @@ export default function ConversationMessages({
sources={query.sources}
toolCalls={query.tool_calls}
feedback={query.feedback}
isStreaming={isCurrentlyStreaming}
handleFeedback={
handleFeedback
? (feedback) => handleFeedback(query, feedback, index)