update system

src/components/chat-view/Markdown/MarkdownPlanBlock.tsx

@@ -0,0 +1,58 @@
+import { AlignLeft, ChevronDown, ChevronRight } from 'lucide-react'
+import { PropsWithChildren, useEffect, useRef, useState } from 'react'
+
+import { useDarkModeContext } from "../../../contexts/DarkModeContext"
+import { t } from '../../../lang/helpers'
+
+import { MemoizedSyntaxHighlighterWrapper } from "./SyntaxHighlighterWrapper"
+
+export default function MarkdownPlanBlock({
+	planContent,
+}: PropsWithChildren<{
+	planContent: string
+}>) {
+	const { isDarkMode } = useDarkModeContext()
+	const containerRef = useRef<HTMLDivElement>(null)
+	const [isOpen, setIsOpen] = useState(false)
+
+	useEffect(() => {
+		if (containerRef.current) {
+			containerRef.current.scrollTop = containerRef.current.scrollHeight
+		}
+	}, [planContent])
+
+	return (
+		planContent && (
+			<div
+				className={`infio-chat-code-block has-filename infio-reasoning-block`}
+			>
+				<div className={'infio-chat-code-block-header'}>
+					<div className={'infio-chat-code-block-header-filename'}>
+						<AlignLeft size={12} className="infio-chat-code-block-header-icon" />
+						{t('chat.reactMarkdown.plan')}
+					</div>
+					<button
+						className="clickable-icon infio-chat-list-dropdown"
+						onClick={() => setIsOpen(!isOpen)}
+					>
+						{isOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+					</button>
+				</div>
+				<div
+					ref={containerRef}
+					className="infio-reasoning-content-wrapper"
+				>
+					<MemoizedSyntaxHighlighterWrapper
+						isDarkMode={isDarkMode}
+						language="markdown"
+						hasFilename={true}
+						wrapLines={true}
+						isOpen={isOpen}
+					>
+						{planContent}
+					</MemoizedSyntaxHighlighterWrapper>
+				</div>
+			</div>
+		)
+	)
+}

src/components/chat-view/ReactMarkdown.tsx

@@ -12,6 +12,7 @@ import MarkdownEditFileBlock from './Markdown/MarkdownEditFileBlock'
 import MarkdownFetchUrlsContentBlock from './Markdown/MarkdownFetchUrlsContentBlock'
 import MarkdownListFilesBlock from './Markdown/MarkdownListFilesBlock'
 import MarkdownMatchSearchFilesBlock from './Markdown/MarkdownMatchSearchFilesBlock'
+import MarkdownPlanBlock from './Markdown/MarkdownPlanBlock'
 import MarkdownReadFileBlock from './Markdown/MarkdownReadFileBlock'
 import MarkdownReasoningBlock from './Markdown/MarkdownReasoningBlock'
 import MarkdownRegexSearchFilesBlock from './Markdown/MarkdownRegexSearchFilesBlock'
@@ -43,9 +44,9 @@ function ReactMarkdown({
 	return (
 		<>
 			{blocks.map((block, index) =>
-				block.type === 'thinking' ? (
-					<RawMarkdownBlock 
-						key={"markdown-" + index} 
+				block.type === 'communication' ? (
+					<RawMarkdownBlock
+						key={"markdown-" + index}
 						content={block.content}
 						className="infio-markdown"
 					/>
@@ -54,6 +55,11 @@ function ReactMarkdown({
 						key={"reasoning-" + index}
 						reasoningContent={block.content}
 					/>
+				) : block.type === 'thinking' ? (
+					<MarkdownPlanBlock
+						key={"plan-" + index}
+						planContent={block.content}
+					/>
 				) : block.type === 'write_to_file' ? (
 					<MarkdownEditFileBlock
 						key={"write-to-file-" + index}
@@ -229,8 +235,8 @@ function ReactMarkdown({
 						content={block.content}
 					/>
 				) : (
-					<RawMarkdownBlock 
-						key={"markdown-" + index} 
+					<RawMarkdownBlock
+						key={"markdown-" + index}
 						content={block.content}
 						className="infio-markdown"
 					/>