Improve streaming experience

Author: ammario

src/components/AIView.tsx

@@ -94,6 +94,24 @@ const EmptyState = styled.div`
   }
 `;
 
+const GlobalStreamingIndicator = styled.div`
+  font-size: 10px;
+  color: var(--color-assistant-border);
+  font-style: italic;
+  padding: 8px 0;
+  animation: pulse 1.5s ease-in-out infinite;
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+`;
+
 const EditBarrier = styled.div`
   margin: 20px 0;
   padding: 12px 15px;
@@ -506,6 +524,9 @@ const AIViewInner: React.FC<AIViewProps> = ({ workspaceId, projectName, branch,
                 })}
               </>
             )}
+            {canInterrupt && (
+              <GlobalStreamingIndicator>streaming... hit Esc to cancel</GlobalStreamingIndicator>
+            )}
             {errorMessage && (
               <ErrorMessage
                 title={errorMessage.title}

src/components/ChatInput.tsx

@@ -30,13 +30,7 @@ const InputControls = styled.div`
 const InputField = styled.textarea<{ isEditing?: boolean; canInterrupt?: boolean }>`
   flex: 1;
   background: ${(props) => (props.isEditing ? "var(--color-editing-mode-alpha)" : "#1e1e1e")};
-  border: 1px solid
-    ${(props) =>
-      props.isEditing
-        ? "var(--color-editing-mode)"
-        : props.canInterrupt
-          ? "var(--color-interrupted)"
-          : "#3e3e42"};
+  border: 1px solid ${(props) => (props.isEditing ? "var(--color-editing-mode)" : "#3e3e42")};
   color: #d4d4d4;
   padding: 8px 12px;
   border-radius: 4px;
@@ -50,12 +44,7 @@ const InputField = styled.textarea<{ isEditing?: boolean; canInterrupt?: boolean
 
   &:focus {
     outline: none;
-    border-color: ${(props) =>
-      props.isEditing
-        ? "var(--color-editing-mode)"
-        : props.canInterrupt
-          ? "var(--color-interrupted)"
-          : "#569cd6"};
+    border-color: ${(props) => (props.isEditing ? "var(--color-editing-mode)" : "#569cd6")};
   }
 
   &::placeholder {

src/components/Messages/AssistantMessage.tsx

@@ -19,24 +19,6 @@ const RawContent = styled.pre`
   border-radius: 3px;
 `;
 
-const StreamingIndicator = styled.span`
-  font-size: 10px;
-  color: var(--color-assistant-border);
-  font-style: italic;
-  margin-right: 8px;
-  animation: pulse 1.5s ease-in-out infinite;
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 0.6;
-    }
-    50% {
-      opacity: 1;
-    }
-  }
-`;
-
 const WaitingMessage = styled.div`
   font-family: var(--font-primary);
   font-size: 13px;
@@ -94,11 +76,6 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message, cla
         },
       ];
 
-  // Streaming indicator in right label
-  const rightLabel = isStreaming ? (
-    <StreamingIndicator>streaming...</StreamingIndicator>
-  ) : undefined;
-
   // Render appropriate content based on state
   const renderContent = () => {
     // Empty streaming state
@@ -141,7 +118,6 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message, cla
       borderColor="var(--color-assistant-border)"
       message={message}
       buttons={buttons}
-      rightLabel={rightLabel}
       className={className}
     >
       {renderContent()}

src/components/Messages/ReasoningMessage.tsx

@@ -131,7 +131,6 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
         <HeaderLeft>
           <ThinkingIcon>💭</ThinkingIcon>
           <span>Thinking</span>
-          {isStreaming && <StreamingIndicator>streaming...</StreamingIndicator>}
         </HeaderLeft>
         {!isStreaming && <Caret isExpanded={isExpanded}>▸</Caret>}
       </ReasoningHeader>

src/components/Messages/TypewriterMarkdown.tsx

@@ -3,24 +3,31 @@ import styled from "@emotion/styled";
 import { markdownStyles } from "../Messages/MarkdownStyles";
 import { MarkdownCore } from "./MarkdownCore";
 
-const MarkdownContainer = styled.div`
+const MarkdownContainer = styled.div<{ isStreaming: boolean }>`
   ${markdownStyles}
-`;
-
-const CursorSpan = styled.span<{ show: boolean }>`
-  display: ${(props) => (props.show ? "inline" : "none")};
-  animation: blink 1s step-end infinite;
 
-  @keyframes blink {
-    0%,
-    50% {
-      opacity: 1;
+  /* Target the last text node's parent when streaming and add blinking cursor */
+  ${(props) =>
+    props.isStreaming &&
+    `
+    p:last-child::after,
+    li:last-child::after,
+    div:last-child::after,
+    span:last-child::after {
+      content: "▊";
+      margin-left: 0.15em;
+      animation: blink 1s step-end infinite;
     }
-    51%,
-    100% {
-      opacity: 0;
+
+    @keyframes blink {
+      0%, 50% {
+        opacity: 1;
+      }
+      51%, 100% {
+        opacity: 0;
+      }
     }
-  }
+  `}
 `;
 
 interface TypewriterMarkdownProps {
@@ -39,13 +46,11 @@ export const TypewriterMarkdown = React.memo<TypewriterMarkdownProps>(function T
   const content = deltas.join("");
 
   // Show cursor only when streaming (not complete)
-  const showCursor = !isComplete && content.length > 0;
+  const isStreaming = !isComplete && content.length > 0;
 
   return (
-    <MarkdownContainer className={className}>
-      <MarkdownCore content={content}>
-        <CursorSpan show={showCursor}>▊</CursorSpan>
-      </MarkdownCore>
+    <MarkdownContainer className={className} isStreaming={isStreaming}>
+      <MarkdownCore content={content} />
     </MarkdownContainer>
   );
 });