fix: add changset

difizen · Nov 28, 2024 · 6d340d2 · 6d340d2
1 parent fa64513
commit 6d340d2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 0 deletions.
diff --git a/.changeset/dry-poets-confess.md b/.changeset/dry-poets-confess.md
@@ -0,0 +1,5 @@
+---
+'@difizen/magent-chat': patch
+---
+
+add chat error and waiting status
diff --git a/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx b/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx
@@ -1,6 +1,7 @@
 import { LoadingOutlined, RightOutlined } from '@ant-design/icons';
 import { useInject, useObserve, ViewInstance } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
+import { Alert } from 'antd';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
 import type { ReactNode } from 'react';
@@ -109,12 +110,28 @@ export const AIMessageContent = (props: AIMessageProps) => {
         className={classNames({
           ['chat-message-ai-empty']: true,
           ['chat-message-ai-error']: item.error,
+          ['chat-message-ai-waiting']: item.state === AnswerState.WAITING,
         })}
       >
         <div className="chat-message-ai-content">
           {item.state === AnswerState.RECEIVING && (
             <LoadingOutlined className="chat-message-ai-receiving" />
           )}
+          {item.state === AnswerState.FAIL && (
+            <Alert
+              message={l10n.t('生成失败，请重试！')}
+              type="error"
+              description={item.error?.message || ''}
+              showIcon
+              className="chat-message-ai-fail"
+            />
+          )}
+          {item.state === AnswerState.WAITING && (
+            <span className="chat-message-ai-waiting">
+              <LoadingOutlined style={{ marginRight: '12px' }} />
+              {l10n.t('请求中...')}
+            </span>
+          )}
         </div>
         <AIMessageAddon {...props} />
       </div>
@@ -143,6 +160,15 @@ export const AIMessageContent = (props: AIMessageProps) => {
         {item.state === AnswerState.RECEIVING && (
           <LoadingOutlined className="chat-message-ai-receiving" />
         )}
+        {item.state === AnswerState.FAIL && (
+          <Alert
+            message={l10n.t('生成失败，请重试！')}
+            type="error"
+            description={item.error?.message || ''}
+            showIcon
+            className="chat-message-ai-fail"
+          />
+        )}
         <AIMessageAddon {...props} />
       </div>
     );

diff --git a/web-packages/magent-chat/src/chat-view/components/message/index.less b/web-packages/magent-chat/src/chat-view/components/message/index.less
@@ -173,6 +173,20 @@
     width: 100%;
   }
 
+  &-waiting {
+    padding: 10px 0 2px 12px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 60%);
+
+    .chat-message-ai-content {
+      min-height: 30px;
+    }
+  }
+
+  &-fail {
+    padding: 8px 16px;
+  }
+
   &-receiving {
     color: var(--mana-text-quaternary);
     padding: 8px 16px;
@@ -183,6 +197,7 @@
 
     .chat-message-ai-content {
       box-shadow: var(--mana-ant-box-shadow-tabs-overflow-bottom);
+      min-height: 30px;
     }
 
     .chat-message-addon-error {

diff --git a/web-packages/magent-chat/src/chat-view/components/message/message-op.tsx b/web-packages/magent-chat/src/chat-view/components/message/message-op.tsx
@@ -11,6 +11,9 @@ export function MessageOp({
   message: BaseChatMessageModel;
   item: BaseChatMessageItemModel;
 }) {
+  if (!item.content) {
+    return null;
+  }
   return (
     <div style={{ paddingTop: 8, display: 'flex' }}>
       {/* <div