🐛 fix: improve message error (#263)

2025-02-14 02:27:56 +08:00
parent 3d9fe46d3e
commit ba83fb8c68
5 changed files with 142 additions and 20 deletions
@@ -0,0 +1,52 @@
+import { Highlighter } from '@lobehub/ui';
+import { ChatItem, ChatItemProps } from '@lobehub/ui/chat';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
+
+import { avatar } from './data';
+
+const demoError = {
+  details: {
+    exception:
+      'Validation filter failedId-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+    msgId:
+      'Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+  },
+  reasons: [
+    {
+      language: 'en',
+      message: 'Validation filter failed',
+    },
+  ],
+};
+export default () => {
+  const store = useCreateStore();
+  const control: ChatItemProps['error'] | any = useControls(
+    {
+      content: {
+        value: 'some content',
+      },
+      description: '',
+      message: 'Error',
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'error',
+      },
+    },
+    { store },
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ChatItem
+        avatar={avatar}
+        error={control}
+        errorMessage={
+          <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            {JSON.stringify(demoError, null, 2)}
+          </Highlighter>
+        }
+        message={control.content}
+      />
+    </StoryBook>
+  );
+};
@@ -0,0 +1,52 @@
+import { Highlighter } from '@lobehub/ui';
+import { ChatItem, ChatItemProps } from '@lobehub/ui/chat';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
+
+import { avatar } from './data';
+
+const demoError = {
+  details: {
+    exception:
+      'Validation filter failedId-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+    msgId:
+      'Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000',
+  },
+  reasons: [
+    {
+      language: 'en',
+      message: 'Validation filter failed',
+    },
+  ],
+};
+export default () => {
+  const store = useCreateStore();
+  const control: ChatItemProps['error'] | any = useControls(
+    {
+      content: {
+        value: '...',
+      },
+      description: '',
+      message: 'Error with defult message placeholder "..."',
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'error',
+      },
+    },
+    { store },
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ChatItem
+        avatar={avatar}
+        error={control}
+        errorMessage={
+          <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            {JSON.stringify(demoError, null, 2)}
+          </Highlighter>
+        }
+        message={control.content}
+      />
+    </StoryBook>
+  );
+};
@@ -15,7 +15,11 @@ apiHeader:

 ## Alert

-<code src="./demos/Alert.tsx" nopadding></code>
+<code src="./demos/Alert.tsx" nopadding></code> <code src="./demos/AlertWithDefaultMessagePlacehoder.tsx" nopadding></code>
+
+## AlertWithContent
+
+<code src="./demos/AlertWithContent.tsx" nopadding></code>

 ## APIs

@@ -25,6 +25,7 @@ const ChatItem = memo<ChatItemProps>(
    primary,
    loading,
    message,
+    placeholderMessage = '...',
    placement = 'left',
    type = 'block',
    avatar,
@@ -91,25 +92,34 @@ const ChatItem = memo<ChatItemProps>(
            }
            gap={8}
          >
-            {error ? (
-              <ErrorContent error={error} message={errorMessage} placement={placement} />
-            ) : (
-              <MessageContent
-                editing={editing}
-                fontSize={fontSize}
-                markdownProps={markdownProps}
-                message={message}
-                messageExtra={messageExtra}
-                onChange={onChange}
-                onDoubleClick={onDoubleClick}
-                onEditingChange={onEditingChange}
-                placement={placement}
-                primary={primary}
-                renderMessage={renderMessage}
-                text={text}
-                type={type}
-              />
-            )}
+            <Flexbox>
+              {error && (message === placeholderMessage || !message) ? (
+                <ErrorContent error={error} message={errorMessage} placement={placement} />
+              ) : (
+                <MessageContent
+                  editing={editing}
+                  fontSize={fontSize}
+                  markdownProps={markdownProps}
+                  message={message}
+                  messageExtra={
+                    <>
+                      {error && (
+                        <ErrorContent error={error} message={errorMessage} placement={placement} />
+                      )}
+                      {messageExtra}
+                    </>
+                  }
+                  onChange={onChange}
+                  onDoubleClick={onDoubleClick}
+                  onEditingChange={onEditingChange}
+                  placement={placement}
+                  primary={primary}
+                  renderMessage={renderMessage}
+                  text={text}
+                  type={type}
+                />
+              )}
+            </Flexbox>
            <Actions actions={actions} editing={editing} placement={placement} type={type} />
          </Flexbox>
          {belowMessage}
@@ -52,6 +52,10 @@ export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange
   * @param editing - The new editing mode
   */
  onEditingChange?: (editing: boolean) => void;
+  /**
+   * @default "..."
+   */
+  placeholderMessage?: string;
  /**
   * @description The placement of the chat item
   * @default 'left'