From 83ab9f7997773e545382b7edb2234cfe5ca8c553 Mon Sep 17 00:00:00 2001
From: hcyang <hqwlkj@outlook.com>
Date: Thu, 14 May 2026 18:01:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E8=A7=86=E5=9B=BE=E7=9A=84=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 useWindowSize 钩子动态获取终端宽度
- 调整思考状态内容左侧边距为 4，提高视觉层次感
- 为普通消息视图设置整体宽度限制，确保内容不超出窗口范围
- 消息文本启用自动换行，提升长文本的可读性
- 消息标记对齐方式调整为 stretch，保持高度一致
---
 src/ui/MessageView.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/ui/MessageView.tsx b/src/ui/MessageView.tsx
index 9c6252c..937cac7 100644
--- a/src/ui/MessageView.tsx
+++ b/src/ui/MessageView.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import { renderMarkdown } from "./markdown";
 import type { SessionMessage } from "../session";
 
@@ -9,6 +9,7 @@ type Props = {
 };
 
 export function MessageView({ message, collapsed }: Props): React.ReactElement | null {
+  const { columns } = useWindowSize();
   if (!message.visible) {
     return null;
   }
@@ -46,7 +47,7 @@ export function MessageView({ message, collapsed }: Props): React.ReactElement |
       return (
         <Box marginLeft={1} flexDirection="column" marginY={0}>
           <StatusLine bulletColor="gray" name="Thinking" params={summary} />
-          <Box flexDirection="column" marginLeft={2}>
+          <Box flexDirection="column" marginLeft={4}>
             {content ? <Text dimColor>{renderMarkdown(content)}</Text> : null}
           </Box>
         </Box>
@@ -54,12 +55,12 @@ export function MessageView({ message, collapsed }: Props): React.ReactElement |
     }
 
     return (
-      <Box marginLeft={1} marginBottom={1} flexGrow={1} gap={1} marginY={0}>
-        <Box>
+      <Box marginLeft={1} marginBottom={1} width={columns - 2} gap={1} marginY={0} flexDirection="row">
+        <Box alignSelf="stretch">
           <Text color="#229ac3">✦</Text>
         </Box>
-        <Box flexDirection="column" flexGrow={1}>
-          {content ? <Text>{renderMarkdown(content)}</Text> : null}
+        <Box flexGrow={1} width={columns - 4}>
+          {content ? <Text wrap="wrap">{renderMarkdown(content)}</Text> : null}
         </Box>
       </Box>
     );