wave-code 0.8.3 → 0.9.0

package/dist/managers/inputHandlers.js

@@ -13,10 +13,7 @@ export const expandLongTextPlaceholders = (text, longTextMap) => {
     }
     return expandedText;
 };
-export const handleSubmit = async (state, dispatch, callbacks, isLoading = false, isCommandRunning = false, attachedImagesOverride) => {
-    if (isLoading || isCommandRunning) {
-        return;
-    }
+export const handleSubmit = async (state, dispatch, callbacks, attachedImagesOverride) => {
     if (state.inputText.trim()) {
         const imageRegex = /\[Image #(\d+)\]/g;
         const matches = [...state.inputText.matchAll(imageRegex)];
@@ -68,6 +65,55 @@ export const cyclePermissionMode = (currentMode, dispatch, callbacks) => {
     dispatch({ type: "SET_PERMISSION_MODE", payload: nextMode });
     callbacks.onPermissionModeChange?.(nextMode);
 };
+const SELECTOR_TRIGGERS = [
+    {
+        char: "@",
+        type: "ACTIVATE_FILE_SELECTOR",
+        shouldActivate: (char, pos, text) => char === "@" && (pos === 1 || /\s/.test(text[pos - 2])),
+    },
+    {
+        char: "/",
+        type: "ACTIVATE_COMMAND_SELECTOR",
+        shouldActivate: (char, pos, text, state) => char === "/" &&
+            !state.showFileSelector &&
+            (pos === 1 || /\s/.test(text[pos - 2])),
+    },
+];
+const getProjectedState = (state, char) => {
+    const beforeCursor = state.inputText.substring(0, state.cursorPosition);
+    const afterCursor = state.inputText.substring(state.cursorPosition);
+    const newInputText = beforeCursor + char + afterCursor;
+    const newCursorPosition = state.cursorPosition + char.length;
+    return { newInputText, newCursorPosition };
+};
+export const getAtSelectorPosition = (text, cursorPosition) => {
+    let i = cursorPosition - 1;
+    while (i >= 0 && !/\s/.test(text[i])) {
+        if (text[i] === "@") {
+            // Check if this @ is at the start or preceded by whitespace
+            if (i === 0 || /\s/.test(text[i - 1])) {
+                return i;
+            }
+            break;
+        }
+        i--;
+    }
+    return -1;
+};
+export const getSlashSelectorPosition = (text, cursorPosition) => {
+    let i = cursorPosition - 1;
+    while (i >= 0 && !/\s/.test(text[i])) {
+        if (text[i] === "/") {
+            // Check if this / is at the start or preceded by whitespace
+            if (i === 0 || /\s/.test(text[i - 1])) {
+                return i;
+            }
+            break;
+        }
+        i--;
+    }
+    return -1;
+};
 export const updateSearchQueriesForActiveSelectors = (state, dispatch, inputText, cursorPosition) => {
     if (state.showFileSelector && state.atPosition >= 0) {
         const queryStart = state.atPosition + 1;
@@ -82,18 +128,45 @@ export const updateSearchQueriesForActiveSelectors = (state, dispatch, inputText
         dispatch({ type: "SET_COMMAND_SEARCH_QUERY", payload: newQuery });
     }
 };
-export const handleSpecialCharInput = (state, dispatch, char, cursorPosition, inputText) => {
-    if (char === "@") {
-        dispatch({ type: "ACTIVATE_FILE_SELECTOR", payload: cursorPosition - 1 });
-    }
-    else if (char === "/" && !state.showFileSelector && cursorPosition === 1) {
+export const processSelectorInput = (state, dispatch, char) => {
+    const { newInputText, newCursorPosition } = getProjectedState(state, char);
+    const trigger = SELECTOR_TRIGGERS.find((t) => t.shouldActivate(char, newCursorPosition, newInputText, state));
+    if (trigger) {
         dispatch({
-            type: "ACTIVATE_COMMAND_SELECTOR",
-            payload: cursorPosition - 1,
+            type: trigger.type,
+            payload: newCursorPosition - 1,
         });
     }
     else {
-        updateSearchQueriesForActiveSelectors(state, dispatch, inputText, cursorPosition);
+        const atPos = getAtSelectorPosition(newInputText, newCursorPosition);
+        let showFileSelector = state.showFileSelector;
+        let atPosition = state.atPosition;
+        if (atPos !== -1 && !state.showFileSelector) {
+            dispatch({
+                type: "ACTIVATE_FILE_SELECTOR",
+                payload: atPos,
+            });
+            showFileSelector = true;
+            atPosition = atPos;
+        }
+        const slashPos = getSlashSelectorPosition(newInputText, newCursorPosition);
+        let showCommandSelector = state.showCommandSelector;
+        let slashPosition = state.slashPosition;
+        if (slashPos !== -1 && !state.showCommandSelector) {
+            dispatch({
+                type: "ACTIVATE_COMMAND_SELECTOR",
+                payload: slashPos,
+            });
+            showCommandSelector = true;
+            slashPosition = slashPos;
+        }
+        updateSearchQueriesForActiveSelectors({
+            ...state,
+            showFileSelector,
+            atPosition,
+            showCommandSelector,
+            slashPosition,
+        }, dispatch, newInputText, newCursorPosition);
     }
 };
 export const handlePasteInput = (state, dispatch, callbacks, input) => {
@@ -119,19 +192,22 @@ export const handlePasteInput = (state, dispatch, callbacks, input) => {
         }
         callbacks.onResetHistoryNavigation?.();
         dispatch({ type: "INSERT_TEXT", payload: char });
-        // Calculate new state for special char handling
-        const newCursorPosition = state.cursorPosition + char.length;
-        const beforeCursor = state.inputText.substring(0, state.cursorPosition);
-        const afterCursor = state.inputText.substring(state.cursorPosition);
-        const newInputText = beforeCursor + char + afterCursor;
-        handleSpecialCharInput(state, dispatch, char, newCursorPosition, newInputText);
+        processSelectorInput(state, dispatch, char);
+    }
+};
+export const getWordEnd = (text, startPos) => {
+    let i = startPos;
+    while (i < text.length && !/\s/.test(text[i])) {
+        i++;
     }
+    return i;
 };
 export const handleCommandSelect = (state, dispatch, callbacks, command) => {
     if (state.slashPosition >= 0) {
+        const wordEnd = getWordEnd(state.inputText, state.slashPosition);
         const beforeSlash = state.inputText.substring(0, state.slashPosition);
-        const afterQuery = state.inputText.substring(state.cursorPosition);
-        const newInput = beforeSlash + afterQuery;
+        const afterWord = state.inputText.substring(wordEnd);
+        const newInput = beforeSlash + afterWord;
         const newCursorPosition = beforeSlash.length;
         dispatch({ type: "SET_INPUT_TEXT", payload: newInput });
         dispatch({ type: "SET_CURSOR_POSITION", payload: newCursorPosition });
@@ -178,10 +254,11 @@ export const handleCommandSelect = (state, dispatch, callbacks, command) => {
 };
 export const handleFileSelect = (state, dispatch, callbacks, filePath) => {
     if (state.atPosition >= 0) {
+        const wordEnd = getWordEnd(state.inputText, state.atPosition);
         const beforeAt = state.inputText.substring(0, state.atPosition);
-        const afterQuery = state.inputText.substring(state.cursorPosition);
-        const newInput = beforeAt + `${filePath} ` + afterQuery;
-        const newCursorPosition = beforeAt.length + filePath.length + 1;
+        const afterWord = state.inputText.substring(wordEnd);
+        const newInput = beforeAt + `@${filePath} ` + afterWord;
+        const newCursorPosition = beforeAt.length + filePath.length + 2;
         dispatch({ type: "SET_INPUT_TEXT", payload: newInput });
         dispatch({ type: "SET_CURSOR_POSITION", payload: newCursorPosition });
         dispatch({ type: "CANCEL_FILE_SELECTOR" });
@@ -224,6 +301,23 @@ export const handleSelectorInput = (state, dispatch, callbacks, input, key) => {
     if (key.upArrow || key.downArrow || key.return || key.tab) {
         return true;
     }
+    if (key.leftArrow) {
+        const newCursorPosition = state.cursorPosition - 1;
+        dispatch({ type: "MOVE_CURSOR", payload: -1 });
+        checkForAtDeletion(state, dispatch, newCursorPosition);
+        checkForSlashDeletion(state, dispatch, newCursorPosition);
+        return true;
+    }
+    if (key.rightArrow) {
+        const newCursorPosition = state.cursorPosition + 1;
+        dispatch({ type: "MOVE_CURSOR", payload: 1 });
+        checkForAtDeletion(state, dispatch, newCursorPosition);
+        checkForSlashDeletion(state, dispatch, newCursorPosition);
+        return true;
+    }
+    if (input === " " && state.showFileSelector) {
+        dispatch({ type: "CANCEL_FILE_SELECTOR" });
+    }
     if (input &&
         !key.ctrl &&
         !("alt" in key && key.alt) &&
@@ -236,19 +330,14 @@ export const handleSelectorInput = (state, dispatch, callbacks, input, key) => {
         !("home" in key && key.home) &&
         !("end" in key && key.end)) {
         dispatch({ type: "INSERT_TEXT", payload: input });
-        // Calculate new state for special char handling
-        const newCursorPosition = state.cursorPosition + input.length;
-        const beforeCursor = state.inputText.substring(0, state.cursorPosition);
-        const afterCursor = state.inputText.substring(state.cursorPosition);
-        const newInputText = beforeCursor + input + afterCursor;
-        handleSpecialCharInput(state, dispatch, input, newCursorPosition, newInputText);
+        processSelectorInput(state, dispatch, input);
         return true;
     }
     return false;
 };
-export const handleNormalInput = async (state, dispatch, callbacks, input, key, isLoading = false, isCommandRunning = false, clearImages) => {
+export const handleNormalInput = async (state, dispatch, callbacks, input, key, clearImages) => {
     if (key.return) {
-        await handleSubmit(state, dispatch, callbacks, isLoading, isCommandRunning);
+        await handleSubmit(state, dispatch, callbacks);
         clearImages?.();
         return true;
     }
@@ -264,10 +353,45 @@ export const handleNormalInput = async (state, dispatch, callbacks, input, key,
     if (key.backspace || key.delete) {
         if (state.cursorPosition > 0) {
             const newCursorPosition = state.cursorPosition - 1;
+            const beforeCursor = state.inputText.substring(0, state.cursorPosition - 1);
+            const afterCursor = state.inputText.substring(state.cursorPosition);
+            const newInputText = beforeCursor + afterCursor;
             dispatch({ type: "DELETE_CHAR" });
             callbacks.onResetHistoryNavigation?.();
             checkForAtDeletion(state, dispatch, newCursorPosition);
             checkForSlashDeletion(state, dispatch, newCursorPosition);
+            // Reactivate file selector if cursor is now within an @word
+            const atPos = getAtSelectorPosition(newInputText, newCursorPosition);
+            let showFileSelector = state.showFileSelector;
+            let atPosition = state.atPosition;
+            if (atPos !== -1 && !state.showFileSelector) {
+                dispatch({
+                    type: "ACTIVATE_FILE_SELECTOR",
+                    payload: atPos,
+                });
+                showFileSelector = true;
+                atPosition = atPos;
+            }
+            const slashPos = getSlashSelectorPosition(newInputText, newCursorPosition);
+            let showCommandSelector = state.showCommandSelector;
+            let slashPosition = state.slashPosition;
+            if (slashPos !== -1 && !state.showCommandSelector) {
+                dispatch({
+                    type: "ACTIVATE_COMMAND_SELECTOR",
+                    payload: slashPos,
+                });
+                showCommandSelector = true;
+                slashPosition = slashPos;
+            }
+            updateSearchQueriesForActiveSelectors({
+                ...state,
+                inputText: newInputText,
+                cursorPosition: newCursorPosition,
+                showFileSelector,
+                atPosition,
+                showCommandSelector,
+                slashPosition,
+            }, dispatch, newInputText, newCursorPosition);
         }
         return true;
     }
@@ -310,20 +434,19 @@ export const handleNormalInput = async (state, dispatch, callbacks, input, key,
     }
     return false;
 };
-export const handleInput = async (state, dispatch, callbacks, input, key, isLoading = false, isCommandRunning = false, clearImages) => {
+export const handleInput = async (state, dispatch, callbacks, input, key, clearImages) => {
     if (state.selectorJustUsed) {
         return true;
     }
     if (key.escape) {
-        if ((isLoading || isCommandRunning) &&
-            !(state.showFileSelector ||
-                state.showCommandSelector ||
-                state.showHistorySearch ||
-                state.showBackgroundTaskManager ||
-                state.showMcpManager ||
-                state.showRewindManager ||
-                state.showHelp ||
-                state.showStatusCommand)) {
+        if (!(state.showFileSelector ||
+            state.showCommandSelector ||
+            state.showHistorySearch ||
+            state.showBackgroundTaskManager ||
+            state.showMcpManager ||
+            state.showRewindManager ||
+            state.showHelp ||
+            state.showStatusCommand)) {
             callbacks.onAbortMessage?.();
             return true;
         }
@@ -373,6 +496,6 @@ export const handleInput = async (state, dispatch, callbacks, input, key, isLoad
         return handleSelectorInput(state, dispatch, callbacks, input, key);
     }
     else {
-        return await handleNormalInput(state, dispatch, callbacks, input, key, isLoading, isCommandRunning, clearImages);
+        return await handleNormalInput(state, dispatch, callbacks, input, key, clearImages);
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "yargs": "^17.7.2",
-    "wave-agent-sdk": "0.8.3"
+    "wave-agent-sdk": "0.9.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/components/ChatInterface.tsx

@@ -4,6 +4,7 @@ import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
 import { LoadingIndicator } from "./LoadingIndicator.js";
 import { TaskList } from "./TaskList.js";
+import { QueuedMessageList } from "./QueuedMessageList.js";
 import { ConfirmationDetails } from "./ConfirmationDetails.js";
 import { ConfirmationSelector } from "./ConfirmationSelector.js";
 
@@ -14,6 +15,7 @@ export const ChatInterface: React.FC = () => {
   const { stdout } = useStdout();
   const [detailsHeight, setDetailsHeight] = useState(0);
   const [selectorHeight, setSelectorHeight] = useState(0);
+  const [dynamicBlocksHeight, setDynamicBlocksHeight] = useState(0);
   const [isConfirmationTooTall, setIsConfirmationTooTall] = useState(false);
 
   const {
@@ -51,15 +53,36 @@ export const ChatInterface: React.FC = () => {
     setSelectorHeight(height);
   }, []);
 
+  const handleDynamicBlocksHeightMeasured = useCallback((height: number) => {
+    setDynamicBlocksHeight(height);
+  }, []);
+
   useLayoutEffect(() => {
+    if (!isConfirmationVisible) {
+      setIsConfirmationTooTall(false);
+      setDetailsHeight(0);
+      setSelectorHeight(0);
+      setDynamicBlocksHeight(0);
+      return;
+    }
+
+    if (isConfirmationTooTall) {
+      return;
+    }
+
     const terminalHeight = stdout?.rows || 24;
-    const totalHeight = detailsHeight + selectorHeight;
+    const totalHeight = detailsHeight + selectorHeight + dynamicBlocksHeight;
     if (totalHeight > terminalHeight) {
       setIsConfirmationTooTall(true);
-    } else {
-      setIsConfirmationTooTall(false);
     }
-  }, [detailsHeight, selectorHeight, stdout?.rows]);
+  }, [
+    detailsHeight,
+    selectorHeight,
+    dynamicBlocksHeight,
+    stdout?.rows,
+    isConfirmationVisible,
+    isConfirmationTooTall,
+  ]);
 
   const handleConfirmationCancel = useCallback(() => {
     if (isConfirmationTooTall) {
@@ -99,6 +122,7 @@ export const ChatInterface: React.FC = () => {
         version={version}
         workdir={workdir}
         model={model}
+        onDynamicBlocksHeightMeasured={handleDynamicBlocksHeightMeasured}
       />
 
       {(isLoading || isCommandRunning || isCompressing) &&
@@ -137,17 +161,20 @@ export const ChatInterface: React.FC = () => {
       )}
 
       {!isConfirmationVisible && !isExpanded && (
-        <InputBox
-          isLoading={isLoading}
-          isCommandRunning={isCommandRunning}
-          sendMessage={sendMessage}
-          abortMessage={abortMessage}
-          mcpServers={mcpServers}
-          connectMcpServer={connectMcpServer}
-          disconnectMcpServer={disconnectMcpServer}
-          slashCommands={slashCommands}
-          hasSlashCommand={hasSlashCommand}
-        />
+        <>
+          <QueuedMessageList />
+          <InputBox
+            isLoading={isLoading}
+            isCommandRunning={isCommandRunning}
+            sendMessage={sendMessage}
+            abortMessage={abortMessage}
+            mcpServers={mcpServers}
+            connectMcpServer={connectMcpServer}
+            disconnectMcpServer={disconnectMcpServer}
+            slashCommands={slashCommands}
+            hasSlashCommand={hasSlashCommand}
+          />
+        </>
       )}
     </Box>
   );

package/src/components/HelpView.tsx

@@ -58,11 +58,13 @@ export const HelpView: React.FC<HelpViewProps> = ({
   const helpItems = [
     { key: "@", description: "Reference files" },
     { key: "/", description: "Commands" },
+    { key: "!", description: "Shell commands (e.g. !ls)" },
     { key: "Ctrl+R", description: "Search history" },
     { key: "Ctrl+O", description: "Expand/collapse messages" },
     { key: "Ctrl+T", description: "Toggle task list" },
     { key: "Ctrl+B", description: "Background current task" },
     { key: "Ctrl+V", description: "Paste image" },
+    { key: "Ctrl+J", description: "Newline" },
     { key: "Shift+Tab", description: "Cycle permission mode" },
     {
       key: "Esc",

package/src/components/InputBox.tsx

@@ -41,8 +41,6 @@ export interface InputBoxProps {
 }
 
 export const InputBox: React.FC<InputBoxProps> = ({
-  isLoading = false,
-  isCommandRunning = false,
   sendMessage = () => {},
   abortMessage = () => {},
   mcpServers = [],
@@ -119,14 +117,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
 
   // Use the InputManager's unified input handler
   useInput(async (input, key) => {
-    await handleInput(
-      input,
-      key,
-      attachedImages,
-      isLoading,
-      isCommandRunning,
-      clearImages,
-    );
+    await handleInput(input, key, attachedImages, clearImages);
   });
 
   const handleRewindCancel = () => {
@@ -138,6 +129,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
   const isPlaceholder = !inputText;
   const placeholderText = INPUT_PLACEHOLDER_TEXT;
 
+  const isShellCommand =
+    inputText?.startsWith("!") && !inputText.includes("\n");
+
   // handleCommandSelectorInsert is already memoized in useInputManager, no need to wrap again
 
   // Split text into three parts: before cursor, cursor position, after cursor
@@ -254,13 +248,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
               </Text>
             </Box>
             <Box paddingRight={1} justifyContent="space-between" width="100%">
-              <Text color="gray">
-                Mode:{" "}
-                <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
-                  {permissionMode}
-                </Text>{" "}
-                (Shift+Tab to cycle)
-              </Text>
+              {isShellCommand ? (
+                <Text color="gray">
+                  Shell: <Text color="yellow">Run shell command</Text>
+                </Text>
+              ) : (
+                <Text color="gray">
+                  Mode:{" "}
+                  <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
+                    {permissionMode}
+                  </Text>{" "}
+                  (Shift+Tab to cycle)
+                </Text>
+              )}
             </Box>
           </Box>
         )}

package/src/components/MessageBlockItem.tsx

@@ -35,8 +35,11 @@ export const MessageBlockItem = ({
               ~{" "}
             </Text>
           )}
-          {message.role === "user" ? (
-            <Text backgroundColor="gray" color="white">
+          {message.role === "user" || isExpanded ? (
+            <Text
+              backgroundColor={message.role === "user" ? "gray" : undefined}
+              color="white"
+            >
               {block.content}
             </Text>
           ) : (
@@ -77,7 +80,9 @@ export const MessageBlockItem = ({
         <CompressDisplay block={block} isExpanded={isExpanded} />
       )}
 
-      {block.type === "reasoning" && <ReasoningDisplay block={block} />}
+      {block.type === "reasoning" && (
+        <ReasoningDisplay block={block} isExpanded={isExpanded} />
+      )}
     </Box>
   );
 };

package/src/components/MessageList.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import os from "os";
-import { Box, Text, Static } from "ink";
+import { Box, Text, Static, measureElement } from "ink";
 import type { Message } from "wave-agent-sdk";
 import { MessageBlockItem } from "./MessageBlockItem.js";
 
@@ -11,6 +11,7 @@ export interface MessageListProps {
   version?: string;
   workdir?: string;
   model?: string;
+  onDynamicBlocksHeightMeasured?: (height: number) => void;
 }
 
 export const MessageList = React.memo(
@@ -21,6 +22,7 @@ export const MessageList = React.memo(
     version,
     workdir,
     model,
+    onDynamicBlocksHeightMeasured,
   }: MessageListProps) => {
     const welcomeMessage = (
       <Box flexDirection="column" paddingTop={1}>
@@ -72,6 +74,17 @@ export const MessageList = React.memo(
     const staticBlocks = blocksWithStatus.filter((b) => !b.isDynamic);
     const dynamicBlocks = blocksWithStatus.filter((b) => b.isDynamic);
 
+    const dynamicBlocksRef = useRef(null);
+
+    useLayoutEffect(() => {
+      if (dynamicBlocksRef.current) {
+        const { height } = measureElement(dynamicBlocksRef.current);
+        onDynamicBlocksHeightMeasured?.(height);
+      } else {
+        onDynamicBlocksHeightMeasured?.(0);
+      }
+    }, [dynamicBlocks, isExpanded, onDynamicBlocksHeightMeasured]);
+
     const staticItems = [
       { isWelcome: true, key: "welcome", block: undefined, message: undefined },
       ...staticBlocks.map((b) => ({ ...b, isWelcome: false })),
@@ -105,7 +118,7 @@ export const MessageList = React.memo(
 
         {/* Dynamic blocks */}
         {dynamicBlocks.length > 0 && (
-          <Box flexDirection="column">
+          <Box ref={dynamicBlocksRef} flexDirection="column">
             {dynamicBlocks.map((item) => (
               <MessageBlockItem
                 key={item.key}

package/src/components/QueuedMessageList.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useChat } from "../contexts/useChat.js";
+import { Box, Text } from "ink";
+
+export const QueuedMessageList: React.FC = () => {
+  const { queuedMessages = [] } = useChat();
+
+  if (queuedMessages.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {queuedMessages.map((msg, index) => {
+        const content = msg.content.trim();
+        const hasImages = msg.images && msg.images.length > 0;
+        const displayText = content || (hasImages ? "[Images]" : "");
+
+        return (
+          <Box key={index}>
+            <Text color="gray" italic>
+              {displayText.length > 60
+                ? `${displayText.substring(0, 57)}...`
+                : displayText}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/ReasoningDisplay.tsx

@@ -1,14 +1,16 @@
 import React from "react";
-import { Box } from "ink";
+import { Box, Text } from "ink";
 import type { ReasoningBlock } from "wave-agent-sdk";
 import { Markdown } from "./Markdown.js";
 
 interface ReasoningDisplayProps {
   block: ReasoningBlock;
+  isExpanded?: boolean;
 }
 
 export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
   block,
+  isExpanded = false,
 }) => {
   const { content } = block;
 
@@ -26,7 +28,11 @@ export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
       paddingLeft={1}
     >
       <Box flexDirection="column">
-        <Markdown>{content}</Markdown>
+        {isExpanded ? (
+          <Text color="white">{content}</Text>
+        ) : (
+          <Markdown>{content}</Markdown>
+        )}
       </Box>
     </Box>
   );