@agentscope-ai/chat 1.1.4

package/dist/docs/8480.async.js

@@ -0,0 +1,1449 @@
+"use strict";(self.webpackChunk_agentscope_ai_chat=self.webpackChunk_agentscope_ai_chat||[]).push([[8480],{93006:function(e,n){n.Z=`import { ChatAnywhere, ChatAnywhereRef, uuid, Stream, TMessage, createCard, DefaultCards, Welcome } from '@ali/spark-chat';
+import { UploadFile, Button } from 'antd';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+export default function Demo() {
+  const ref = useRef<ChatAnywhereRef>();
+
+  // @ts-ignore
+  window.ref = ref;
+
+  const onInput = useCallback(async (data: { query: string; fileList?: UploadFile<any>[] }) => {
+    const query = data.query;
+
+    ref.current.updateMessage({
+      id: uuid(),
+      cards: [{
+        code: 'Text',
+        data: {
+          content: query
+        }
+      }],
+      role: 'user',
+      msgStatus: 'finished',
+    });
+
+
+    setTimeout(() => {
+      ref.current.updateMessage({
+        id: uuid(),
+        cards: [{
+          code: 'Text',
+          data: {
+            content: \`answer for: \${query}\`,
+          }
+        }],
+        role: 'assistant',
+        msgStatus: 'finished',
+      });
+
+    }, 1000);
+
+  }, []);
+
+  const onStop = useCallback(async () => {
+  }, []);
+
+
+  return <ChatAnywhere
+    ref={ref}
+    cardConfig={{
+      Welcome: () => <h1>\u81EA\u5B9A\u4E49\u6B22\u8FCE\u5361\u7247</h1>
+    }}
+    uiConfig={{
+      quickInput: <>
+        <Button size="small" onClick={() => {
+          ref.current.updateMessage({
+            id: uuid(),
+            cards: [{
+              code: 'Text',
+              data: {
+                content: \`some text\`,
+              }
+            }],
+            role: 'assistant',
+            msgStatus: 'finished',
+          });
+        }}>text</Button>
+        <Button size="small" onClick={() => {
+          ref.current.updateMessage({
+            id: uuid(),
+            cards: [
+              {
+                code: 'Text',
+                data: {
+                  content: 'what is citypop'
+                },
+
+              },
+              {
+                code: 'Images',
+                data: [
+                  { url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png', },
+                ],
+              }
+            ],
+            role: 'user',
+            msgStatus: 'finished',
+          });
+        }}>text with image</Button>
+        <Button size="small" onClick={() => {
+          ref.current.updateMessage({
+            id: uuid(),
+            cards: [
+              {
+                code: 'Text',
+                data: {
+                  content: 'what is citypop'
+                },
+
+              },
+              {
+                code: 'Files',
+                data: [
+                  { filename: 'citypop.pdf', bytes: 1024 },
+                  { filename: 'citypop.pdf', bytes: 2048 },
+                ],
+              }
+            ],
+            role: 'user',
+            msgStatus: 'finished',
+          });
+        }}>text with file</Button>
+        <Button size="small" onClick={() => {
+          ref.current.updateMessage({
+            id: uuid(),
+            cards: [
+              {
+                code: 'Welcome',
+                data: {},
+              },
+            ],
+            role: 'assistant',
+            msgStatus: 'finished',
+          });
+        }}>custom card a</Button>
+        <Button size="small">custom card b</Button>
+      </>,
+      disclaimer: 'AI can also make mistakes, so please check carefully and use it with caution',
+      narrowScreen: true,
+    }}
+    onInput={{
+      onSubmit: onInput,
+    }}
+    onStop={onStop}
+  ></ChatAnywhere>;
+
+}`},70822:function(e,n){n.Z=`import React from 'react';
+import { createStyles } from 'antd-style';
+import Chat from './Chat';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css\`
+    display: flex;
+    height: 100vh;
+  \`,
+
+  iframe: css\`
+    flex: 5;
+    height: 100%;
+    border: none;
+    display: block;
+  \`,
+
+  chat: css\`
+    flex: 3;
+    height: 100%;
+    border-left: 1px solid \${token.colorBorderSecondary};
+  \`,
+
+
+}));
+
+export default function () {
+  const { styles } = useStyles();
+
+  return <div className={styles.container}>
+    <iframe className={styles.iframe} src="https://market.m.taobao.com/app/liveme-console/agentscope-portal/index.html" />
+    <div className={styles.chat}>
+      <Chat />
+    </div>
+  </div>;
+
+}`},18135:function(e,n){n.Z=`import { ChatAnywhere, ChatAnywhereRef, uuid, Stream, TMessage, createCard, DefaultCards, Welcome, useChatAnywhere } from '@ali/spark-chat';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Card, Flex, Statistic, UploadFile, Input } from 'antd';
+import { CopyOutlined, GlobalOutlined, PaperClipOutlined, RedoOutlined } from '@ant-design/icons';
+import Header from '../Header';
+import sessionLocalStorage from '../sessionLocalStorage';
+import compact from 'lodash/compact'
+import { Button } from '@spark-ai/design';
+import ReactDOM from 'react-dom';
+import { useMount } from 'ahooks';
+import { useDemoContext } from '../DemoContext';
+
+export default function () {
+  const ref = useRef<ChatAnywhereRef>();
+  const { demoContext, getDemoContext, setDemoContext } = useDemoContext();
+  // @ts-ignore
+  window.ref = ref;
+
+  const currentQA = useRef<{
+    query?: TMessage,
+    answer?: TMessage,
+    abortController?: AbortController;
+  }>({});
+
+
+  useMount(() => {
+    ref.current.updateSession(
+      sessionLocalStorage.get()
+    );
+  })
+
+
+  const onFinish = useCallback((status: 'finished' | 'interrupted' = 'finished', usage?: any) => {
+    currentQA.current.answer.msgStatus = status;
+    currentQA.current.answer.cards = currentQA.current.answer.cards.map(item => {
+      if (item.code === 'Text') {
+        return createCard('Text', {
+          ...item.data,
+          msgStatus: status,
+        });
+      } else if (item.code === 'DeepThink') {
+        return createCard('DeepThink', {
+          ...item.data,
+          loading: false,
+        });
+      } else {
+        return item;
+      }
+    });
+
+    if (status === 'interrupted') {
+      currentQA.current.answer.cards.push(
+        createCard('Interrupted', {})
+      );
+    }
+
+    currentQA.current.answer.cards.push(
+      createCard('Footer', {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <RedoOutlined />, label: '\u91CD\u65B0\u751F\u6210', onClick: () => {
+              onRegenerate(currentQA.current.answer);
+            }
+          },
+        ]} />,
+        right: usage ? <DefaultCards.FooterCount data={[['\u8F93\u5165tokens', usage.prompt_tokens], ['\u8F93\u51FAtokens', usage.completion_tokens]]} ></DefaultCards.FooterCount> : null
+
+      })
+    )
+    ref.current.setLoading(false);
+    ReactDOM.flushSync(() => {
+      ref.current.updateMessage(currentQA.current.answer);
+    });
+
+    saveToLocalStorage();
+  }, [demoContext]);
+
+  const saveToLocalStorage = useCallback(async () => {
+    // \u5C06\u5F53\u524D\u7684\u6D88\u606F\u5217\u8868\u540C\u6B65\u5230\u5F53\u524D session \u4E2D
+    ReactDOM.flushSync(() => {
+      ref.current.updateSessionMessages(ref.current.getMessages());
+    });
+
+    sessionLocalStorage.set(ref.current.getSession());
+  }, [demoContext]);
+
+  const chat = useCallback(async (messages: TMessage[]) => {
+
+    currentQA.current.answer = {
+      id: uuid(),
+      cards: [],
+      content: '',
+      role: 'assistant',
+      msgStatus: 'generating',
+    }
+
+    ref.current.updateMessage(currentQA.current.answer);
+
+    currentQA.current.abortController = new AbortController();
+
+    const requestMessages = messages.map(msg => {
+      return {
+        ...msg,
+        content: msg.content || (msg.cards || []).reduce((p, c) => { return p + (c.code === 'Text' ? c.data.content : '') }, '')
+      };
+    });
+
+
+    const response = await fetch('https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': \`Bearer sk-9c2fde3cee7d4edb8825d18f4f0fc0a9\`
+      },
+      body: JSON.stringify({
+        model: getDemoContext().model,
+        enable_thinking: getDemoContext().enable_thinking,
+        messages: requestMessages,
+        stream: true,
+        stream_options: {
+          include_usage: true,
+
+        },
+      }),
+      signal: currentQA.current.abortController.signal
+    });
+
+
+    if (response.status !== 200) {
+
+
+      return
+    }
+
+
+    let content = '';
+    let reasoning_content = '';
+    for await (const chunk of Stream({
+      readableStream: response.body,
+    }, {
+      openaiCompatible: true,
+    })) {
+
+      if (currentQA.current.answer.msgStatus === 'interrupted') {
+        debugger;
+        currentQA.current.abortController.abort();
+        break;
+      }
+
+      if (chunk.data === '[DONE]') {
+        onFinish('finished')
+        break;
+      }
+
+      const data = JSON.parse(chunk.data);
+      if (data.usage) {
+        onFinish('finished', data.usage);
+        break;
+      }
+
+      content += data.choices[0]?.delta.content || '';
+      reasoning_content += data.choices[0]?.delta.reasoning_content || '';
+
+      currentQA.current.answer.cards = compact([
+        reasoning_content && createCard('DeepThink', {
+          content: reasoning_content,
+          loading: !content,
+        }),
+        content && createCard('Text', {
+          content: content,
+          typing: true,
+          msgStatus: 'generating'
+        })
+      ])
+
+
+      ref.current.updateMessage(currentQA.current.answer);
+    }
+  }, [demoContext]);
+
+  const onInput = useCallback(async (data: { query: string; fileList?: UploadFile[][] }) => {
+    if (!getDemoContext().apikey) {
+      document.dispatchEvent(new CustomEvent('settingOpen'));
+      return;
+    }
+
+    clearFooter();
+    currentQA.current.answer = undefined;
+    currentQA.current.query = {
+      id: uuid(),
+      cards: [],
+      content: data.query,
+      role: 'user',
+      msgStatus: 'finished',
+    };
+
+    if (data.fileList?.length) {
+      const images = [];
+      const files = [];
+      // @ts-ignore
+      const allFileList = data.fileList.reduce((p, c) => [...p, ...c], [])
+      allFileList.forEach(file => {
+        if (file.type.startsWith('image')) {
+          images.push(file)
+        } else {
+          files.push(file)
+        }
+      })
+
+      if (images.length) {
+        currentQA.current.query.cards.push(createCard('Images', images.map(item => {
+          return item.response
+        })))
+      }
+
+      if (files.length) {
+        currentQA.current.query.cards.push(
+          createCard('Files', files.map(item => {
+            return {
+              filename: item.name,
+              bytes: item.size
+            }
+          }))
+        )
+      }
+    }
+
+    ref.current.setLoading(true);
+
+
+    ReactDOM.flushSync(() => {
+      ref.current.updateMessage(currentQA.current.query);
+    });
+
+    ref.current.scrollToBottom();
+    chat(ref.current.getMessages());
+  }, [demoContext]);
+
+  const onStop = useCallback(() => {
+    onFinish('interrupted');
+  }, [demoContext]);
+
+  const clearFooter = useCallback(() => {
+    try {
+      currentQA.current.answer.cards = currentQA.current.answer.cards.filter(item => item.code !== 'Footer');
+      ref.current.updateMessage(currentQA.current.answer);
+    } catch (error) {
+    }
+  }, [demoContext]);
+
+  const onRegenerate = useCallback((msg: Partial<TMessage>) => {
+    ReactDOM.flushSync(() => {
+      ref.current.removeMessage(msg);
+    });
+    const messages = ref.current.getMessages();
+    chat(messages);
+  }, [demoContext]);
+
+  const enable_thinking = demoContext.enable_thinking;
+
+  return <div style={{ height: '100vh' }}>
+    <ChatAnywhere
+      cardConfig={{ MyCard }}
+      uiConfig={{
+        welcome: <Welcome
+          style={{ marginTop: '35vh' }}
+          title="Nice to meet you!"
+          desc={"How can I help you today?"}
+        />,
+        disclaimer: 'AI can also make mistakes, so please check and use it carefully',
+        header: <Header />,
+        logo: <div style={{ fontFamily: 'Montserrat', fontWeight: 'bold' }}>Spark Chat</div>,
+        quickInput: <>
+          <Button size="small" onClick={() => {
+            ReactDOM.flushSync(() => {
+              ref.current.updateMessage({
+                id: uuid(),
+                cards: [
+                  {
+                    code: 'MyCard',
+                    data: [
+                      ['MyCard', 10000]
+                    ],
+                  },
+                ],
+                role: 'assistant',
+                msgStatus: 'finished',
+              })
+
+            })
+            ref.current.scrollToBottom();
+          }}>quickInput</Button>
+          <Button size="small">test case A</Button>
+          <Button size="small">test case B</Button>
+        </>
+      }}
+      ref={ref}
+      onInput={{
+        morePrefixActions: <>
+          {
+            enable_thinking !== undefined ?
+              <Button type="text" color={enable_thinking ? 'primary' : 'default'} variant={enable_thinking ? 'filled' : 'text'} icon={<GlobalOutlined />} style={{ padding: '0 6px', gap: 6 }} onClick={() => setDemoContext({ enable_thinking: !enable_thinking })}>DeepThink</Button>
+              : null
+          }
+        </>,
+        onSubmit: onInput,
+        maxLength: 100000,
+        beforeSubmit: () => Promise.resolve(true),
+        zoomable: true,
+      }}
+      onStop={onStop}
+      onRegenerate={onRegenerate}
+      onSessionKeyChange={(currentSessionKey) => {
+        currentQA.current.answer = undefined;
+        currentQA.current.query = undefined;
+        sessionLocalStorage.set({ currentSessionKey });
+      }}
+      onUpload={[{
+        multiple: false,
+        icon: <PaperClipOutlined />,
+        customRequest(options) {
+          options.onSuccess({
+            url: URL.createObjectURL(options.file as Blob)
+          });
+        }
+      }, {
+        multiple: false,
+        icon: <CopyOutlined />,
+        customRequest(options) {
+          options.onError(new Error('\u4E0A\u4F20\u5931\u8D25'));
+        }
+      }]}
+    ></ChatAnywhere>
+  </div>
+}
+
+
+function MyCard(props) {
+  const onInput = useChatAnywhere(v => v.onInput);
+
+  const [v, sv] = useState('');
+  return <Card title="my card" size="small">
+    <Flex gap={32}>
+      {props.data.map((item) => {
+        return <Statistic title={item[0]} value={item[1]} key={item[0]} />
+      })}
+    </Flex>
+    <br />
+    <Flex gap={8}>
+      <Input placeholder="\u8BF7\u8F93\u5165" onChange={e => sv(e.target.value)} /> <Button onClick={() => {
+        onInput.onSubmit({ query: v });
+      }}>\u63D0\u4EA4</Button>
+    </Flex>
+  </Card>;
+}`},97763:function(e,n){n.Z=`import { useSetState } from 'ahooks';
+import { SetState } from 'ahooks/lib/useSetState';
+import React, { useState } from 'react';
+import { useGetState } from 'ahooks';
+
+type TContext = {
+  model: string
+  apikey: string
+  theme: 'purple' | 'carbon' | string
+  enable_thinking?: boolean;
+}
+
+export const DemoContext = React.createContext<{
+  demoContext: TContext,
+  setDemoContext: SetState<TContext>,
+  getDemoContext: () => TContext
+}>(undefined);
+
+export const DemoContextProvider = function (props: { children: React.ReactNode }) {
+  const [demoContext, setDemoContext, getDemoContext] = useGetState<TContext>({
+    model: 'qwq-plus',
+    apikey: localStorage.getItem('apikey') || '',
+    theme: localStorage.getItem('theme') || 'carbon',
+    enable_thinking: undefined,
+  });
+
+
+  return <DemoContext.Provider value={{
+    demoContext, getDemoContext, setDemoContext: data => {
+      return setDemoContext((state) => {
+        const nextState = {
+          ...state,
+          ...data,
+        }
+
+        if (nextState.model === 'qwen3-32b' && nextState.enable_thinking === undefined) {
+          nextState.enable_thinking = true
+        }
+
+        if (nextState.model !== 'qwen3-32b') {
+          nextState.enable_thinking = undefined;
+        }
+
+        localStorage.setItem('apikey', nextState.apikey);
+        localStorage.setItem('theme', nextState.theme);
+        return nextState
+      });
+    }
+  }}>
+    {props.children}
+  </DemoContext.Provider>
+};
+
+
+export const useDemoContext = function () {
+  return React.useContext(DemoContext);
+};
+
+
+`},60097:function(e,n){n.Z=`import React from "react";
+// @ts-ignore
+import styles from './index.module.less';
+import { Dropdown, MenuProps, Space, Typography, Button } from 'antd';
+import { DownOutlined } from "@ant-design/icons";
+import { useDemoContext } from '../DemoContext';
+
+const items = [
+  {
+    key: 'qwen-turbo',
+    label: <Model name="Qwen-Turbo" />
+  },
+  {
+    key: 'qwen-max',
+    label: <Model name="Qwen-Max" />
+  },
+  {
+    key: 'qwq-plus',
+    label: <Model name="Qwen-QwQ-Plus" />
+  },
+  {
+    key: 'qwen3-32b',
+    label: <Model name="Qwen3-32B" />
+  },
+];
+
+function Model(props: {
+  name?: string;
+  size?: number;
+  arrow?: boolean
+}) {
+  const { name = '', size = 12, arrow = false } = props;
+  return <div className={styles.model}>
+    <img src="https://img.alicdn.com/imgextra/i4/O1CN01SdyYTH1Kfz6skC36o_!!6000000001192-2-tps-96-96.png" className={styles.modelLogo} />
+    <div className={styles.modelName} style={{ fontSize: size }} >{name}</div>
+    {
+      arrow && <DownOutlined />
+    }
+  </div>
+}
+
+export default function () {
+  const { demoContext, setDemoContext } = useDemoContext();
+
+  const current = items.find(item => item.key === demoContext.model);
+
+  return <Dropdown
+    menu={{
+      items,
+      selectable: true,
+      onSelect: ({ key }) => {
+        setDemoContext({
+          model: key,
+        });
+      }
+    }}
+  >
+    <Button type="text" style={{ padding: '0 6px' }}>
+      {current?.label ? React.cloneElement(current.label, { size: 16, arrow: true }) : null}
+    </Button>
+  </Dropdown>
+}`},73381:function(e,n){n.Z=`import React, { useEffect, useState } from "react";
+import { Drawer, Button, Form, Input } from '@spark-ai/design';
+import { SettingOutlined } from "@ant-design/icons";
+import { ColorPicker, Flex, Radio, Switch, theme } from "antd";
+import { useDemoContext } from "../DemoContext";
+import { usePrefersColor } from "dumi";
+
+
+export default function () {
+  const [form] = Form.useForm();
+  const [open, setOpen] = useState(false);
+  const { getDemoContext, setDemoContext } = useDemoContext();
+  const [
+    color,
+    prefersColor,
+    setPrefersColor,
+  ] = usePrefersColor();
+
+  useEffect(() => {
+    const settingOpen = () => setOpen(true);
+    document.addEventListener('settingOpen', settingOpen);
+    return () => {
+      document.removeEventListener('settingOpen', settingOpen);
+    }
+  }, [])
+
+
+
+  return <>
+    <Button type="text" icon={<SettingOutlined />} onClick={() => setOpen(true)}>
+    </Button>
+
+    <Drawer title="Setting"
+
+      afterOpenChange={() => {
+        form.setFieldsValue({
+          apikey: getDemoContext().apikey,
+          theme: getDemoContext().theme,
+          darkMode: color === 'dark',
+        })
+      }}
+
+      onClose={() => setOpen(false)} open={open} footer={<Button type="primary" onClick={async () => {
+        const values = await form.validateFields();
+        setPrefersColor(!!values.darkMode ? 'dark' : 'light');
+        setDemoContext({
+          apikey: values.apikey,
+          theme: values.theme,
+        })
+        setOpen(false);
+      }}>Save</Button>}>
+      <Form
+        form={form}
+      >
+        <Form.Item name="apikey" label="API Key" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+
+
+        <Form.Item name="theme" label="Theme" rules={[{ required: true }]}>
+          {/* @ts-ignore */}
+          <ThemeInput />
+        </Form.Item>
+
+
+        <Form.Item name="darkMode" label="Dark Mode" rules={[{ required: true }]}>
+          <Switch />
+        </Form.Item>
+      </Form>
+    </Drawer>
+  </>
+}
+
+
+function ThemeInput({ value, onChange }) {
+  return <Flex gap={8} align="center">
+    <Radio.Group options={[
+      { label: 'Carbon', value: 'carbon' },
+      { label: 'Purple', value: 'purple' },
+    ]} value={value} onChange={e => onChange(e.target.value)} />
+    <ColorPicker value={value} onChange={e => {
+      return onChange(e.toCssString());
+    }} /></Flex>
+}`},36416:function(e,n){n.Z=`@import '../../../../index.less';
+
+.header {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px 0 12px;
+  width: 100%;
+}
+
+.model {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  :global {
+    .anticon-down {
+      transform: scaleY(0.75);
+    }
+  }
+
+  .modelLogo {
+    width: 20px;
+    height: 20px;
+    background-color: e('var(--@{ant-prefix}-color-bg-base)');
+    border-radius: 6px;
+  }
+
+  .modelName {
+    font-weight: 500;
+    line-height: 20px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+}
+`},97626:function(e,n){n.Z=`import React from "react";
+// @ts-ignore
+import styles from './index.module.less';
+import ModelSelect from "./ModelSelect";
+import Setting from "./Setting";
+
+export default function () {
+  return <div className={styles.header}>
+    <ModelSelect />
+    <div style={{ flex: 1 }} />
+    <Setting />
+  </div>
+}`},90013:function(e,n){n.Z=`import React from 'react';
+import { DemoContextProvider } from './DemoContext';
+import Chat from './Chat';
+import './index.less';
+
+export default function () {
+  return <div style={{ height: '100vh' }} className='chat-anywhere-demo'>
+    <DemoContextProvider>
+      <Chat />
+    </DemoContextProvider>
+  </div>
+}
+
+`},4752:function(e,n){n.Z=`.chat-anywhere-demo {
+  .spc-chat-anywhere-chat-welcome {
+    height: auto;
+  }
+}`},80142:function(e,n){n.Z=`const sessionLocalStorage = {
+  get() {
+    const localStorageDataString = localStorage.getItem(
+      'chat-anywhere-session',
+    );
+
+    if (localStorageDataString) {
+      return JSON.parse(localStorageDataString);
+    } else {
+      return {
+        sessionList: [
+          {
+            label: Date.now().toString(),
+            key: '9ed1150f-6046-4917-a124-6e85ba1ea933',
+            messages: [[]],
+          },
+        ],
+        currentSessionKey: '9ed1150f-6046-4917-a124-6e85ba1ea933',
+        currentRegenerateIndex: 0,
+      };
+    }
+  },
+  set(data) {
+    const beforeData = sessionLocalStorage.get() || {};
+    
+    localStorage.setItem(
+      'chat-anywhere-session',
+      JSON.stringify({
+        ...beforeData,
+        ...data,
+      }),
+    );
+  },
+};
+
+export default sessionLocalStorage;
+`},97318:function(e,n){n.Z=`import React, { useCallback } from 'react';
+import { useCopilotChat } from "@copilotkit/react-core";
+import { Sender, Bubble, CustomCardsProvider } from '@ali/spark-chat';
+import { TMessage } from '@ali/spark-chat';
+import { CodeBlock } from '@spark-ai/design';
+import Input from './Input';
+
+export default function Chat() {
+  const context = useCopilotChat();
+
+  const messages = context.visibleMessages.map((message) => {
+
+    if (message.type === 'TextMessage' && message.role === "user") {
+      return {
+        role: 'user',
+        content: message.content,
+        id: message.id,
+      }
+    }
+
+    if (message.type === 'TextMessage' && message.role === "assistant") {
+      return {
+        role: 'assistant',
+        typing: true,
+        msgStatus: message.status.code === 'Pending' ? 'generating' : void 0,
+        content: message.content,
+        id: message.id,
+      }
+    }
+
+    return {
+      role: 'assistant',
+      cards: [{
+        code: 'Code',
+        data: message,
+      }],
+      id: message.id,
+    }
+
+  }).filter(i => !!i);
+
+
+
+  return (
+    <>
+      <CustomCardsProvider cardConfig={{ Code }}>
+        <Bubble.List
+          style={{ height: 0, flex: 1, }}
+          items={messages as TMessage[]}
+        />
+      </CustomCardsProvider>
+      <Input />
+    </>
+  );
+}
+
+
+function Code(props) {
+  return <div style={{ width: '80%', border: '1px solid #ccc' }}>
+    <CodeBlock language="json" value={JSON.stringify(props.data)} />
+  </div>
+}`},58658:function(e,n){n.Z=`import React from 'react';
+import { Sender, Bubble, CustomCardsProvider, TMessage } from '@ali/spark-chat';
+import { useCopilotChat } from "@copilotkit/react-core";
+import { Role, TextMessage } from '@copilotkit/runtime-client-gql';
+
+
+export default function () {
+  const [content, setContent] = React.useState('');
+  const context = useCopilotChat();
+
+  return <div>
+    <Sender
+      value={content}
+      loading={context.isLoading}
+      onChange={setContent}
+      onSubmit={async () => {
+        context.appendMessage(new TextMessage({
+          content: content,
+          role: Role.User,
+        }))
+        setContent('');
+      }} />
+  </div>
+}`},71235:function(e,n){n.Z=`import { Button, Checkbox } from "antd";
+import { useTasks } from "./hook";
+import { TaskStatus, type Task } from "./hook";
+import React from 'react';
+import { DeleteOutlined } from "@ant-design/icons";
+
+export function Task({ task: { id, title, status } }: { task: Task }) {
+  const { setTaskStatus, deleteTask } = useTasks();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flex: 1
+      }}
+    >
+      <Checkbox checked={status === TaskStatus.done} onChange={() => {
+        setTaskStatus(id, status === TaskStatus.done ? TaskStatus.todo : TaskStatus.done)
+      }}>
+        <label
+        >
+          {title}
+        </label>
+      </Checkbox>
+      <Button onClick={() => deleteTask(id)} icon={<DeleteOutlined />}>
+      </Button>
+    </div>
+  );
+}
+`},36323:function(e,n){n.Z=`import React from 'react';
+import { Task } from "./Task";
+import { useTasks } from "./hook";
+import { List } from 'antd';
+
+export function TasksList() {
+  const { tasks } = useTasks();
+  return <List
+    style={{ margin: 16 }}
+    rowKey="id"
+    header={<div>AI TODO MVC</div>}
+    bordered
+    dataSource={tasks}
+    renderItem={(item) => {
+      return (
+        <List.Item>
+          <Task task={item} />
+        </List.Item>
+      )
+    }}
+  />
+
+}
+`},60793:function(e,n){n.Z=`import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core";
+import { createContext, useContext, useState, ReactNode } from "react";
+import React from 'react';
+
+export type Task = {
+  id: number;
+  title: string;
+  status: TaskStatus;
+};
+
+export enum TaskStatus {
+  todo = "todo",
+  done = "done",
+}
+
+
+const defaultTasks: Task[] = [
+  {
+    id: 1,
+    title: "Complete project proposal",
+    status: TaskStatus.done,
+  },
+  {
+    id: 2,
+    title: "Review design mockups",
+    status: TaskStatus.done,
+  },
+  {
+    id: 3,
+    title: "Prepare presentation slides",
+    status: TaskStatus.todo,
+  },
+  {
+    id: 4,
+    title: "Send meeting notes email",
+    status: TaskStatus.todo,
+  },
+  {
+    id: 5,
+    title: "Review Uli's pull request",
+    status: TaskStatus.todo,
+  },
+];
+
+let nextId = defaultTasks.length + 1;
+
+type TasksContextType = {
+  tasks: Task[];
+  addTask: (title: string) => void;
+  setTaskStatus: (id: number, status: TaskStatus) => void;
+  deleteTask: (id: number) => void;
+};
+
+const TasksContext = createContext<TasksContextType | undefined>(undefined);
+
+export const TasksProvider = ({ children }: { children: ReactNode }) => {
+  const [tasks, setTasks] = useState<Task[]>(defaultTasks);
+
+  useCopilotReadable({
+    description: "The state of the todo list",
+    value: JSON.stringify(tasks),
+  });
+
+  useCopilotAction({
+    name: "addTask",
+    description: "Adds a task to the todo list",
+    parameters: [
+      {
+        name: "title",
+        type: "string",
+        description: "The title of the task",
+        required: true,
+      },
+    ],
+    handler: ({ title }) => {
+      addTask(title);
+    }
+  });
+
+  useCopilotAction({
+    name: "deleteTask",
+    description: "Deletes a task from the todo list",
+    parameters: [
+      {
+        name: "id",
+        type: "number",
+        description: "The id of the task",
+        required: true,
+      },
+    ],
+    handler: ({ id }) => {
+      deleteTask(id);
+    }
+  });
+
+  useCopilotAction({
+    name: "setTaskStatus",
+    description: "Sets the status of a task",
+    parameters: [
+      {
+        name: "id",
+        type: "number",
+        description: "The id of the task",
+        required: true,
+      },
+      {
+        name: "status",
+        type: "string",
+        description: "The status of the task",
+        enum: Object.values(TaskStatus),
+        required: true,
+      },
+    ],
+    handler: ({ id, status }) => {
+      setTaskStatus(id, status);
+    }
+  });
+
+  const addTask = (title: string) => {
+    setTasks([...tasks, { id: nextId++, title, status: TaskStatus.todo }]);
+  };
+
+  const setTaskStatus = (id: number, status: TaskStatus) => {
+    setTasks(
+      tasks.map((task) =>
+        task.id === id ? { ...task, status } : task
+      )
+    );
+  };
+
+  const deleteTask = (id: number) => {
+    setTasks(tasks.filter((task) => task.id !== id));
+  };
+
+  return (
+    <TasksContext.Provider value={{ tasks, addTask, setTaskStatus, deleteTask }}>
+      {children}
+    </TasksContext.Provider>
+  );
+};
+
+export const useTasks = () => {
+  const context = useContext(TasksContext);
+  if (context === undefined) {
+    throw new Error("useTasks must be used within a TasksProvider");
+  }
+  return context;
+};
+`},30513:function(e,n){n.Z=`import React from 'react';
+import { TasksList } from './TasksList';
+import { TasksProvider } from './hook';
+import { CopilotKit } from "@copilotkit/react-core";
+import { createStyles } from 'antd-style';
+import Chat from './Chat';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css\`
+    display: flex;
+    height: 100%;
+  \`,
+
+  left: css\`
+    flex: 1;
+  \`,
+  right: css\`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid \${token.colorBorderSecondary};
+  \`
+}));
+
+
+export default function () {
+  const { styles } = useStyles();
+
+  return <CopilotKit runtimeUrl="https://func-jfa-zedphfubal.cn-hangzhou.fcapp.run/ag-ui"><div className={styles.container}>
+
+    <div className={styles.left}>
+      <TasksProvider>
+        <TasksList />
+      </TasksProvider>
+    </div>
+
+    <div className={styles.right}>
+      <Chat />
+    </div>
+  </div>
+  </CopilotKit>
+
+}`},57373:function(e,n){n.Z=`import React, { useCallback } from 'react';
+import { Bubble, TMessage, SparkChatProvider } from '@ali/spark-chat'
+import { Card, Carousel, Flex, Statistic } from 'antd';
+
+const contentStyle: React.CSSProperties = {
+  margin: 0,
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+function MyCard(props) {
+  return <Card title="my card" size="small">
+    <Flex gap={32}>
+      {props.data.map((item) => {
+        return <Statistic title={item[0]} value={item[1]} />
+      })}
+    </Flex>
+  </Card>;
+}
+
+export default function Custom() {
+  const getRoles = useCallback((bubble: any) => {
+    const message = bubble as TMessage;
+    const roleConfig: any = {};
+    if (message.role === 'assistant') {
+      roleConfig.placement = 'start';
+    }
+
+    if (message.role === 'user') roleConfig.placement = 'end';
+    return roleConfig;
+  }, []);
+
+  const messages = [
+    {
+      role: 'user',
+      content: '\u4F60\u662F\u8C01',
+      id: '1',
+    },
+    {
+      role: 'assistant',
+      content: '\u6211\u662F\u901A\u4E49\u5343\u95EE\uFF0C\u963F\u91CC\u5DF4\u5DF4\u96C6\u56E2\u65D7\u4E0B\u7684\u8D85\u5927\u89C4\u6A21\u8BED\u8A00\u6A21\u578B\u3002\u6211\u7684\u4E2D\u6587\u540D\u662F\u901A\u4E49\u5343\u95EE\uFF0C\u82F1\u6587\u540D\u662FQwen\u3002\u6211\u80FD\u591F\u5E2E\u52A9\u60A8\u56DE\u7B54\u95EE\u9898\u3001\u64B0\u5199\u6587\u7AE0\u3001\u7F16\u5199\u4EE3\u7801\u3001\u8FDB\u884C\u903B\u8F91\u63A8\u7406\u3001\u8868\u8FBE\u89C2\u70B9\u3001\u73A9\u6E38\u620F\u7B49\u3002\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u95EE\u9898\u6216\u9700\u8981\u5E2E\u52A9\uFF0C\u6B22\u8FCE\u968F\u65F6\u544A\u8BC9\u6211\uFF01',
+      id: '2',
+    },
+    {
+      role: 'user',
+      content: 'what is citypop',
+      id: '3',
+    },
+    {
+      role: 'assistant',
+      content: \`city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period.
+city pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. common themes include city life, summer vibes, nature, and romantic encounters. the music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban japan in the 1980s.
+some notable city pop artists include mariya takeuchi, known for her iconic song " plastic love," and joe hisaishi, a composer famous for his work on studio ghibli films, though he is not strictly considered a city pop artist.
+today, city pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.\`,
+      id: '4',
+    },
+    {
+      role: 'user',
+      content: '\u4F60\u662F\u8C01',
+      id: '5',
+    },
+    {
+      role: 'assistant',
+      content: '\u6211\u662F\u901A\u4E49\u5343\u95EE\uFF08Qwen\uFF09\uFF0C\u963F\u91CC\u5DF4\u5DF4\u96C6\u56E2\u65D7\u4E0B\u7684\u8D85\u5927\u89C4\u6A21\u8BED\u8A00\u6A21\u578B\u3002\u6211\u7684\u4E2D\u6587\u540D\u662F\u901A\u4E49\u5343\u95EE\uFF0C\u82F1\u6587\u540D\u662FQwen\u3002\u6211\u80FD\u591F\u5E2E\u52A9\u60A8\u56DE\u7B54\u95EE\u9898\u3001\u64B0\u5199\u6587\u7AE0\u3001\u7F16\u5199\u4EE3\u7801\u3001\u8FDB\u884C\u903B\u8F91\u63A8\u7406\u3001\u8868\u8FBE\u89C2\u70B9\u3001\u73A9\u6E38\u620F\u7B49\u3002\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u95EE\u9898\u6216\u9700\u8981\u5E2E\u52A9\uFF0C\u6B22\u8FCE\u968F\u65F6\u544A\u8BC9\u6211\uFF01',
+      id: '6',
+    },
+    {
+      role: 'user',
+      cards: [
+        {
+          code: 'Text',
+          data: {
+            content: 'what is citypop'
+          },
+        }
+      ],
+      id: '7',
+    },
+    {
+      role: 'assistant',
+      cards: [
+        {
+          code: 'Text',
+          data: {
+            content: \`city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period.
+city pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. common themes include city life, summer vibes, nature, and romantic encounters. the music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban japan in the 1980s.
+some notable city pop artists include mariya takeuchi, known for her iconic song " plastic love," and joe hisaishi, a composer famous for his work on studio ghibli films, though he is not strictly considered a city pop artist.
+today, city pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.\`,
+          }
+        },
+        {
+          code: 'MyCard',
+          data: [['Active Users', 112893], ['Account Balance (CNY)', 112893]],
+        },
+        {
+          code: 'Foo',
+          component: () => <Card size="small" title="card with inline component">
+            <Carousel >
+              <div>
+                <h3 style={contentStyle}>1</h3>
+              </div>
+              <div>
+                <h3 style={contentStyle}>2</h3>
+              </div>
+              <div>
+                <h3 style={contentStyle}>3</h3>
+              </div>
+              <div>
+                <h3 style={contentStyle}>4</h3>
+              </div>
+            </Carousel>
+          </Card>
+        },
+        {
+          code: 'Bar',
+          component: <h1>Bar</h1>
+        }
+      ],
+      id: '8',
+    },
+  ]
+
+
+  return (
+    <SparkChatProvider
+      cardConfig={{ MyCard }}>
+      <Bubble.List
+        style={{ height: 400 }}
+        roles={getRoles}
+        items={messages}
+      />
+    </SparkChatProvider>
+  );
+}
+
+`},63399:function(e,n){n.Z=`import { Bubble } from '@ali/spark-chat';
+import React from 'react';
+
+export default function () {
+  return <Bubble
+
+    cards={[
+
+      {
+        code: 'Files',
+        data: [
+          { filename: 'citypop.pdf', bytes: 1024 },
+          { filename: 'citypop.pdf', bytes: 2048 },
+        ],
+      },
+    ]} />
+}`},53679:function(e,n){n.Z=`import { Bubble, DefaultCards } from '@ali/spark-chat';
+import { CopyOutlined, DislikeOutlined, LikeOutlined, RedoOutlined } from '@ant-design/icons';
+import React from 'react';
+
+export default function () {
+  return <Bubble
+
+    cards={[
+
+      {
+        code: 'Footer',
+        data: {
+          left: <DefaultCards.FooterActions data={[
+
+            {
+              icon: <CopyOutlined />, onClick: () => {
+              }
+            },
+            {
+              icon: <LikeOutlined />, onClick: () => {
+              }
+            },
+            {
+              icon: <DislikeOutlined />, onClick: () => {
+              }
+            },
+
+            {
+              icon: <RedoOutlined />, onClick: () => {
+              }
+            },
+          ]} />,
+          right: <DefaultCards.FooterCount data={[
+            ['Words', 99],
+            ['Input tokens', 200],
+            ['Output tokens', 300],
+          ]} />
+
+        }
+      },
+    ]} />
+}`},56391:function(e,n){n.Z=`import React from 'react';
+import { Bubble } from '@ali/spark-chat';
+const App = () => <Bubble cards={[
+  {
+    code: 'Images',
+    data: [
+      { url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png', },
+    ],
+  },
+]} />;
+
+export default App;
+`},48481:function(e,n){n.Z=`import React from 'react';
+import { Bubble } from '@ali/spark-chat';
+
+const content = \`city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period.
+city pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. common themes include city life, summer vibes, nature, and romantic encounters. the music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban japan in the 1980s.
+some notable city pop artists include mariya takeuchi, known for her iconic song " plastic love," and joe hisaishi, a composer famous for his work on studio ghibli films, though he is not strictly considered a city pop artist.
+today, city pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.\`
+const App = () => <Bubble cards={[
+  {
+    code: 'Text',
+    data: {
+      content
+    },
+  },
+]} />;
+
+export default App;
+`},26873:function(e,n){n.Z=`import React, { useCallback } from 'react';
+import { VoiceChatProvider, useVoiceChat } from '@ali/spark-chat';
+import { Sender, Bubble, CustomCardsProvider } from '@ali/spark-chat';
+import { IconButton } from '@spark-ai/design';
+import { AudioMutedOutlined, AudioOutlined, PhoneOutlined } from '@ant-design/icons';
+
+export default () => {
+  return <VoiceChatProvider>
+    <App />
+  </VoiceChatProvider>
+};
+
+
+function App() {
+  const context = useVoiceChat();
+  const getRoles = useCallback((bubble: any) => {
+    const message = bubble as TMessage;
+    const roleConfig: any = {};
+    if (message.role === 'assistant') {
+      roleConfig.placement = 'start';
+    }
+
+    if (message.role === 'user') roleConfig.placement = 'end';
+    return roleConfig;
+  }, []);
+
+  const wsConnected = context.voiceChatContext.wsConnected;
+
+
+  return <div style={{
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+  }}>
+
+    <Bubble.List
+      roles={getRoles}
+      style={{ height: 0, flex: 1, padding: 16 }}
+      items={context.voiceChatContext.messages}
+    />
+
+    <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', padding: 32 }}>
+
+      <div className='tts' style={{ width: 165, height: 45, marginBottom: 32 }} >
+
+      </div>
+
+
+      <IconButton
+        type="primary"
+        danger={wsConnected}
+        onClick={() => {
+          if (wsConnected) {
+            context.recorderContext.recorderRef.current.stop();
+          } else {
+            context.recorderContext.recorderRef.current.start();
+          }
+        }}
+        shape="circle" icon={
+          wsConnected ? <AudioMutedOutlined /> :
+            <PhoneOutlined />
+        } size="large"
+      />
+
+    </div>
+  </div>;
+}`}}]);