From de0a41b5f19e7dc63df7a916d653fd397891a798 Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Mon, 26 May 2025 17:57:10 +0100
Subject: [PATCH] feat: add streaming state to markdown quick actions

- Pass isStreaming prop through message components to disable actions during streaming
- Improve action button styling with icons and better spacing
- Disable buttons while streaming to prevent concurrent actions
---
 app/components/chat/AssistantMessage.tsx | 15 +++++++++++++--
 app/components/chat/Markdown.tsx         | 19 ++++++++++++++++---
 app/components/chat/Messages.client.tsx  |  1 +
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/components/chat/AssistantMessage.tsx b/app/components/chat/AssistantMessage.tsx
index 2d013b8..13908d8 100644
--- a/app/components/chat/AssistantMessage.tsx
+++ b/app/components/chat/AssistantMessage.tsx
@@ -16,6 +16,7 @@ interface AssistantMessageProps {
   append?: (message: Message) => void;
   chatMode?: 'discuss' | 'build';
   setChatMode?: (mode: 'discuss' | 'build') => void;
+  isStreaming?: boolean;
 }
 
 function openArtifactInWorkbench(filePath: string) {
@@ -43,7 +44,17 @@ function normalizedFilePath(path: string) {
 }
 
 export const AssistantMessage = memo(
-  ({ content, annotations, messageId, onRewind, onFork, append, chatMode, setChatMode }: AssistantMessageProps) => {
+  ({
+    content,
+    annotations,
+    messageId,
+    onRewind,
+    onFork,
+    append,
+    chatMode,
+    setChatMode,
+    isStreaming,
+  }: AssistantMessageProps) => {
     const filteredAnnotations = (annotations?.filter(
       (annotation: JSONValue) =>
         annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
@@ -141,7 +152,7 @@ export const AssistantMessage = memo(
             </div>
           </div>
         </>
-        <Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} html>
+        <Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} isStreaming={isStreaming} html>
           {content}
         </Markdown>
       </div>
diff --git a/app/components/chat/Markdown.tsx b/app/components/chat/Markdown.tsx
index de56880..28ced46 100644
--- a/app/components/chat/Markdown.tsx
+++ b/app/components/chat/Markdown.tsx
@@ -18,10 +18,11 @@ interface MarkdownProps {
   append?: (message: Message) => void;
   chatMode?: 'discuss' | 'build';
   setChatMode?: (mode: 'discuss' | 'build') => void;
+  isStreaming?: boolean;
 }
 
 export const Markdown = memo(
-  ({ children, html = false, limitedMarkdown = false, append, setChatMode }: MarkdownProps) => {
+  ({ children, html = false, limitedMarkdown = false, append, setChatMode, isStreaming }: MarkdownProps) => {
     logger.trace('Render');
 
     const components = useMemo(() => {
@@ -44,7 +45,7 @@ export const Markdown = memo(
           }
 
           if (className?.includes('__boltQuickAction__') || dataProps?.dataBoltQuickAction) {
-            return <div className="w-full grid grid-cols-2 gap-4">{children}</div>;
+            return <div className="flex items-center gap-2 flex-wrap mt-3.5">{children}</div>;
           }
 
           return (
@@ -84,13 +85,24 @@ export const Markdown = memo(
             const path = dataProps['data-path'] || dataProps.dataPath;
             const href = dataProps['data-href'] || dataProps.dataHref;
 
+            const iconClassMap: Record<string, string> = {
+              file: 'i-ph:file',
+              message: 'i-ph:chats',
+              implement: 'i-ph:code',
+              link: 'i-ph:link',
+            };
+
+            const safeType = typeof type === 'string' ? type : '';
+            const iconClass = iconClassMap[safeType] ?? 'i-ph:question';
+
             return (
               <button
-                className=" p-2 rounded-md bg-bolt-elements-item-backgroundAccent hover:opacity-50 text-bolt-elements-item-contentAccent"
+                className="rounded-md justify-center px-3 py-1.5 text-xs bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent opacity-90 hover:opacity-100 flex items-center gap-2 cursor-pointer"
                 data-type={type}
                 data-message={message}
                 data-path={path}
                 data-href={href}
+                disabled={isStreaming}
                 onClick={() => {
                   if (type === 'file') {
                     openArtifactInWorkbench(path);
@@ -118,6 +130,7 @@ export const Markdown = memo(
                   }
                 }}
               >
+                <div className={`text-lg ${iconClass}`} />
                 {children}
               </button>
             );
diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx
index 6dc8d7f..037d26c 100644
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -100,6 +100,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
                         append={props.append}
                         chatMode={props.chatMode}
                         setChatMode={props.setChatMode}
+                        isStreaming={isStreaming}
                       />
                     )}
                   </div>