bytedance · louisyoungx · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
@@ -53,7 +53,16 @@
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^5",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "@ant-design/x": "^2.1.1",
+    "@ant-design/x-markdown": "^2.1.1",
+    "antd": "^6.1.1",
+    "zod": "^3.24.4",
+    "@ai-sdk/anthropic": "^3.0.0",
+    "@ai-sdk/google": "^3.0.0",
+    "@ai-sdk/openai": "^3.0.0",
+    "@ai-sdk/provider-utils": "^4.0.0",
+    "ai": "^6.0.12"
   },
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",

@@ -29,6 +29,14 @@ export default defineConfig({
        * ignore warnings from @coze-editor/editor/language-typescript
        */
       ignoreWarnings: [/Critical dependency: the request of a dependency is an expression/],
+      module: {
+        rules: [
+          {
+            resourceQuery: /raw/,
+            type: 'asset/source',
+          },
+        ],
+      },
     },
   },
 });
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Tooltip, IconButton } from '@douyinfe/semi-ui';
+import { IconComment } from '@douyinfe/semi-icons';
+
+import { useChatPanel } from '../../../../plugins/panel-manager-plugin/hooks';
+
+export const ChatButton = () => {
+  const { toggle } = useChatPanel();
+  return (
+    <Tooltip content="Chat">
+      <IconButton
+        type="tertiary"
+        theme="borderless"
+        icon={<IconComment />}
+        onClick={() => toggle()}
+      />
+    </Tooltip>
+  );
+};
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.emptyState {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+}
+
+.emptyContent {
+    text-align: center;
+    max-width: 480px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.emptyIcon {
+    font-size: 64px;
+    line-height: 1;
+    margin-bottom: 12px;
+    color: #cbcbcb;
+}
+
+.emptyTitle {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 1.4;
+}
+
+.emptyDescription {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.8;
+}
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IconComment } from '@douyinfe/semi-icons';
+
+import styles from './index.module.css';
+
+export const ChatEmptyState: React.FC = () => (
+  <div className={styles.emptyState}>
+    <div className={styles.emptyContent}>
+      <div className={styles.emptyIcon}>
+        <IconComment style={{ fontSize: '64px' }} />
+      </div>
+      <div className={styles.emptyTitle}>你好！我是 FlowGram AI 助手</div>
+      <div className={styles.emptyDescription}>
+        我可以帮你创建和编辑流程图,
+        <br />
+        有什么我可以帮助你的吗？
+      </div>
+    </div>
+  </div>
+);
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.header {
+    padding: 8px 16px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+}
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IconButton } from '@douyinfe/semi-ui';
+import { IconClose } from '@douyinfe/semi-icons';
+
+import styles from './index.module.css';
+
+interface ChatHeaderProps {
+  onClose: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({ onClose }) => (
+  <div className={styles.header}>
+    <h3 className={styles.title}>FlowGram AI 助手</h3>
+    <IconButton type="tertiary" theme="borderless" icon={<IconClose />} onClick={onClose} />
+  </div>
+);
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.sender {
+    padding: 16px;
+    flex-shrink: 0;
+    background: #fff;
+}
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Sender } from '@ant-design/x';
+
+import { useChatInput } from '../../hooks';
+
+import styles from './index.module.css';
+
+interface ChatInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  onCancel?: () => void;
+  loading?: boolean;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = (props) => {
+  const internal = useChatInput();
+
+  // 如果传入了 props，使用外部控制（用于编辑模式）
+  // 否则使用内部状态（用于新消息输入）
+  const value = props.value ?? internal.value;
+  const onChange = props.onChange ?? internal.setValue;
+  const onSubmit = props.onSubmit ?? internal.send;
+  const onCancel = props.onCancel ?? internal.cancel;
+  const loading = props.loading ?? internal.isLoading;
+
+  return (
+    <div className={styles.sender}>
+      <Sender
+        placeholder="输入消息..."
+        value={value}
+        onChange={onChange}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        loading={loading}
+      />
+    </div>
+  );
+};
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.messages {
+    flex: 1;
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.messages :global(.ant-bubble-list) {
+    flex: 1;
+    min-height: 0;
+}
+
+.messages :global(.ant-bubble-list-scroll-box)::-webkit-scrollbar {
+    width: 6px;
+}
+
+.messages :global(.ant-bubble-list-scroll-box)::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.messages :global(.ant-bubble-list-scroll-box)::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
+}
+
+.messages :global(.ant-bubble-list-scroll-box)::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+.userMessageWrapper {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.userMessageContent {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.06);
+    padding: 8px 12px;
+    border-radius: 8px;
+    width: fit-content;
+    white-space: pre-line;
+}