✨ feat: Add AiMessageDisplay component for streaming and static messages

canisminor1990 · canisminor1990 · commit 81450152e8fe · 2025-05-28T15:30:31.000+08:00
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "ink-testing-library": "^3.0.0",
     "lerna": "^8.2.2",
     "lint-staged": "^15.5.2",
+    "lodash-es": "^4.17.21",
     "multi-semantic-release": "^3.0.2",
     "openai": "^4.103.0",
     "pkgroll": "^2.12.2",
diff --git a/packages/lobe-commit/src/commands/Ai/index.tsx b/packages/lobe-commit/src/commands/Ai/index.tsx
@@ -1,32 +1,23 @@
-import { Spinner } from '@inkjs/ui';
 import { Panel, useTheme } from '@lobehub/cli-ui';
 import { Text } from 'ink';
 import { memo, useEffect, useState } from 'react';
 
+import AiMessageDisplay from '@/components/AiMessageDisplay';
 import { useCommits } from '@/hooks/useCommits';
 import { selectors } from '@/store';
 
-const StreamingCursor = memo(() => {
-  const [visible, setVisible] = useState(true);
-  const theme = useTheme();
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setVisible((prev) => !prev);
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return <Text color={theme.colorTextDescription}>{visible ? '▊' : ' '}</Text>;
-});
-
 const Ai = memo(() => {
   const [message, setMessage] = useState<string>('');
   const theme = useTheme();
   const commitConfig = selectors.getCommitConfig();
 
-  const { summary, start, loadingInfo, loading } = useCommits({ setMessage });
+  const {
+    summary,
+    start,
+    loadingInfo,
+    loading,
+    message: streamingMessage,
+  } = useCommits({ setMessage });
 
   useEffect(() => {
     start();
@@ -45,16 +36,12 @@ const Ai = memo(() => {
       reverse
       title={`🤯 AI Commit Generator ${commitConfig.stream ? '(Streaming)' : ''}`}
     >
-      {!loading && message ? (
-        <Text>{message}</Text>
-      ) : loading && message && commitConfig.stream ? (
-        <Text>
-          {message}
-          <StreamingCursor />
-        </Text>
-      ) : (
-        <Spinner label={loadingInfo} />
-      )}
+      <AiMessageDisplay
+        loading={loading}
+        loadingInfo={loadingInfo}
+        message={message}
+        streamingMessage={streamingMessage}
+      />
     </Panel>
   );
 });
diff --git a/packages/lobe-commit/src/commands/Commit/AiCommit.tsx b/packages/lobe-commit/src/commands/Commit/AiCommit.tsx
@@ -1,9 +1,10 @@
-import { Spinner } from '@inkjs/ui';
 import { Panel, SelectInput, type SelectInputItem, SplitView, useTheme } from '@lobehub/cli-ui';
 import { Text, useInput } from 'ink';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 
+import AiMessageDisplay from '@/components/AiMessageDisplay';
 import { useCommits } from '@/hooks/useCommits';
+import { selectors } from '@/store';
 import { useCommitStore } from '@/store/commitStore';
 
 const AiCommit = memo(() => {
@@ -14,8 +15,16 @@ const AiCommit = memo(() => {
   }));
   useInput(useCallback((_, key) => key.tab && setStep('type'), []));
   const theme = useTheme();
+  const commitConfig = selectors.getCommitConfig();
 
-  const { summary, start, loadingInfo, loading, restart } = useCommits({ setMessage });
+  const {
+    summary,
+    start,
+    loadingInfo,
+    loading,
+    restart,
+    message: streamingMessage,
+  } = useCommits({ setMessage });
 
   const handleSelect = useCallback(
     (item: any) => {
@@ -62,7 +71,7 @@ const AiCommit = memo(() => {
   return (
     <Panel
       footer={!loading && message && <SelectInput items={items} onSelect={handleSelect} />}
-      title={`🤯 AI Commit Generator`}
+      title={`🤯 AI Commit Generator ${commitConfig.stream ? '(Streaming)' : ''}`}
     >
       {summary && (
         <SplitView direction={'bottom'}>
@@ -72,7 +81,12 @@ const AiCommit = memo(() => {
           </Text>
         </SplitView>
       )}
-      {!loading && message ? <Text>{message}</Text> : <Spinner label={loadingInfo} />}
+      <AiMessageDisplay
+        loading={loading}
+        loadingInfo={loadingInfo}
+        message={message}
+        streamingMessage={streamingMessage}
+      />
     </Panel>
   );
 });
diff --git a/packages/lobe-commit/src/commands/Config/index.tsx b/packages/lobe-commit/src/commands/Config/index.tsx
@@ -135,6 +135,7 @@ const Config = memo(() => {
         desc: 'Enable streaming output for AI responses, default as enabled',
         key: 'stream',
         label: 'Streaming output',
+        showValue: false,
         value: store.stream,
       },
       {
diff --git a/packages/lobe-commit/src/components/AiMessageDisplay.tsx b/packages/lobe-commit/src/components/AiMessageDisplay.tsx
@@ -0,0 +1,49 @@
+import { Spinner } from '@inkjs/ui';
+import { Text } from 'ink';
+import { memo } from 'react';
+
+import { selectors } from '@/store';
+
+import StreamingCursor from './StreamingCursor';
+
+interface AiMessageDisplayProps {
+  loading: boolean;
+  loadingInfo: string;
+  message?: string;
+  streamingMessage?: string;
+}
+
+const AiMessageDisplay = memo<AiMessageDisplayProps>(
+  ({ loading, loadingInfo, message, streamingMessage }) => {
+    const commitConfig = selectors.getCommitConfig();
+
+    if (commitConfig.stream) {
+      if (loading) {
+        if (streamingMessage) {
+          return (
+            <Text>
+              {streamingMessage}
+              <StreamingCursor />
+            </Text>
+          );
+        } else {
+          return (
+            <Text>
+              <StreamingCursor />
+            </Text>
+          );
+        }
+      } else {
+        return <Text>{message}</Text>;
+      }
+    } else {
+      if (!loading && message) {
+        return <Text>{message}</Text>;
+      } else {
+        return <Spinner label={loadingInfo} />;
+      }
+    }
+  },
+);
+
+export default AiMessageDisplay;
diff --git a/packages/lobe-commit/src/components/StreamingCursor.tsx b/packages/lobe-commit/src/components/StreamingCursor.tsx
@@ -0,0 +1,20 @@
+import { useTheme } from '@lobehub/cli-ui';
+import { Text } from 'ink';
+import { memo, useEffect, useState } from 'react';
+
+const StreamingCursor = memo(() => {
+  const [visible, setVisible] = useState(true);
+  const theme = useTheme();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <Text color={theme.colorTextDescription}>{visible ? '▊' : ' '}</Text>;
+});
+
+export default StreamingCursor;
diff --git a/packages/lobe-commit/src/core/Commits.ts b/packages/lobe-commit/src/core/Commits.ts
@@ -71,6 +71,9 @@ export class Commits {
     messages: any[],
     onStreamMessage: (message: string) => void,
   ): Promise<string> {
+    // 开始流式输出，先调用一次回调来切换UI状态
+    onStreamMessage('');
+
     const stream = await this.client.chat.completions.create({
       messages: messages as OpenAI.Chat.Completions.ChatCompletionMessageParam[],
       model: this.config.modelName,
@@ -84,11 +87,11 @@ export class Commits {
       const content = chunk.choices[0]?.delta?.content || '';
       if (content) {
         fullMessage += content;
-        onStreamMessage(
-          addEmojiToMessage(
-            fullMessage.replace(/\((.*?)\):/, (match, p1) => match && `(${p1.toLowerCase()}):`),
-          ),
+        // 实时更新显示的消息
+        const processedMessage = addEmojiToMessage(
+          fullMessage.replace(/\((.*?)\):/, (match, p1) => match && `(${p1.toLowerCase()}):`),
         );
+        onStreamMessage(processedMessage);
       }
     }
 
diff --git a/packages/lobe-commit/src/hooks/useCommits.ts b/packages/lobe-commit/src/hooks/useCommits.ts
@@ -22,19 +22,24 @@ export const useCommits = ({ setMessage, onSuccess, onError, ...config }: Commit
     (message: string) => {
       setStreamingMessage(message);
       setMessage?.(message);
+      setIsGlobalLoading(false);
     },
     [setMessage],
   );
 
   const { data, isLoading } = useSWR(
     shouldFetch ? key : null,
-    async () =>
-      commits.current.genCommit({
+    async () => {
+      if (commitConfig.stream) {
+        setIsGlobalLoading(false);
+      }
+      return commits.current.genCommit({
         cacheSummary: summary,
         onStreamMessage: commitConfig.stream ? handleStreamMessage : undefined,
         setLoadingInfo,
         setSummary,
-      }),
+      });
+    },
     {
       onError: (err, ...rest) => {
         onError?.(err, ...rest);
diff --git a/packages/lobe-commit/src/store/selectors.ts b/packages/lobe-commit/src/store/selectors.ts
@@ -20,12 +20,13 @@ const getDiffChunkSize = () => {
   const diffChunkSize = getConfig('diffChunkSize');
   return defaultDiffChunkSize > diffChunkSize ? defaultDiffChunkSize : diffChunkSize;
 };
-const getCommitConfig = () => ({
+const getCommitConfig = (): Config => ({
   ...(config.store as Config),
   apiBaseUrl: getOpenAIProxyUrl(),
   diffChunkSize: getDiffChunkSize(),
   githubToken: getGithubToken(),
   openaiToken: getOpenAIApiKey(),
+  stream: getConfig('stream'),
 });
 
 export default {

Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,7 @@ const Config = memo(() => {`
`135`	`135`	`desc: 'Enable streaming output for AI responses, default as enabled',`
`136`	`136`	`key: 'stream',`
`137`	`137`	`label: 'Streaming output',`
	`138`	`+ showValue: false,`
`138`	`139`	`value: store.stream,`
`139`	`140`	`},`
`140`	`141`	`{`