AI对话

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message, type AIChatDialogueProps } from '@fibrous/semi-ai-react';
import { RadioGroup, Radio, type RadioChangeEvent } from '@fibrous/semi-ui-react';

const defaultMessages: Message[] = [
    {
        role: 'system',
        id: '1',
        createdAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createdAt: 1715676751919,
        content: '给一个 Semi Design 的 Button 组件的使用示例',
    },
    {
        role: 'assistant',
        id: '3',
        createdAt: 1715676751919,
        content: "以下是一个 Semi 代码的使用示例：\n```jsx \nimport React from 'react';\nimport { Button } from '@fibrous/semi-ui-react';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n```\n",
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(defaultMessages);
    const [mode, setMode] = useState<NonNullable<AIChatDialogueProps['mode']>>('bubble');
    const [align, setAlign] = useState<NonNullable<AIChatDialogueProps['align']>>('leftRight');

    const onAlignChange = useCallback((e: RadioChangeEvent) => {
        setAlign(e.target.value);
    }, []);

    const onModeChange = useCallback((e: RadioChangeEvent) => {
        setMode(e.target.value);
    }, []);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    return (
        <>
            <span style={{ display: 'flex', flexDirection: 'column', rowGap: '8px' }}>
                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px' }}>
                    模式
                    <RadioGroup aria-label="模式" onChange={onModeChange} value={mode} type="button">
                        <Radio value="bubble">气泡</Radio>
                        <Radio value="noBubble">非气泡</Radio>
                        <Radio value="userBubble">用户会话气泡</Radio>
                    </RadioGroup>
                </span>
                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px' }}>
                    会话布局方式
                    <RadioGroup aria-label="会话布局方式" onChange={onAlignChange} value={align} type="button">
                        <Radio value="leftRight">左右分布</Radio>
                        <Radio value="leftAlign">左对齐</Radio>
                    </RadioGroup>
                </span>
            </span>
            <div style={{ border: '1px solid var(--semi-color-border)', borderRadius: 12, marginTop: 10, padding: 20 }}>
                <AIChatDialogue key={align + mode} align={align} mode={mode} chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />
            </div>
        </>
    );
}

import { useEffect, useRef, useState } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';
import { Button } from '@fibrous/semi-ui-react';

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const REPLY = '这是一段模拟的流式回复，每隔一小段时间追加几个字。回复生成期间，向上滚动（滚轮、拖动滚动条、PageUp 或方向键）会停止自动跟随，停在你滚到的位置；滚回底部后恢复跟随；发送新消息时也会回到底部。'.repeat(3);

const defaultMessages: Message[] = [{ role: 'assistant', id: 'welcome', content: '点击下方按钮发送消息，回复会以流式方式逐步生成。' }];

export default function AIChatDialogueDemo() {
    const [messages, setMessages] = useState(defaultMessages);
    const [streaming, setStreaming] = useState(false);
    const timerRef = useRef<ReturnType<typeof setInterval>>(undefined);
    const onChatsChange = (chats: Message[]) => {
        setMessages(chats);
    };

    useEffect(() => () => clearInterval(timerRef.current), []);

    const send = () => {
        const replyId = `reply-${Date.now()}`;
        setMessages((prev) => [...prev, { role: 'user', id: `user-${Date.now()}`, content: '请生成一段较长的回复' }, { role: 'assistant', id: replyId, content: '', status: 'in_progress' }]);
        setStreaming(true);
        let length = 0;
        timerRef.current = setInterval(() => {
            length += 6;
            const done = length >= REPLY.length;
            setMessages((prev) => prev.map((message) => (message.id === replyId ? { ...message, content: REPLY.slice(0, length), status: done ? 'completed' : 'in_progress' } : message)));
            if (done) {
                clearInterval(timerRef.current);
                setStreaming(false);
            }
        }, 100);
    };

    return (
        <>
            <Button onClick={send} disabled={streaming} style={{ marginBottom: '12px' }}>
                发送消息
            </Button>
            <div style={{ height: '320px' }}>
                <AIChatDialogue chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />
            </div>
        </>
    );
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';

const defaultMessages: Message[] = [
    {
        role: 'assistant',
        id: '1',
        createdAt: 1715676751919,
        content: '请求成功',
    },
    {
        id: 'loading',
        role: 'assistant',
        status: 'in_progress', // renders like queued
    },
    {
        role: 'assistant',
        id: 'error',
        content: '请求错误',
        status: 'failed', // renders like cancelled
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(defaultMessages);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    return <AIChatDialogue chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />;
}

import { useState, useCallback, useMemo } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message, type DialogueContentItemRendererMap } from '@fibrous/semi-ai-react';
import { IconSearchStroked, IconCodeStroked, IconBriefStroked } from '@fibrous/semi-icons-react';

interface PlanStep {
    type?: string;
    summary?: string;
    description?: string;
}

const defaultMessages: Message[] = [
    {
        role: 'assistant',
        id: '1',
        createdAt: 1715676751919,
        content: '普通文本',
    },
    {
        id: '2',
        role: 'user',
        content: [
            {
                type: 'message',
                content: [
                    {
                        type: 'input_text',
                        text: '帮我生成类似的图片',
                    },
                    {
                        type: 'input_image',
                        image_url: '/assets/root-web-sites/edit-bag.jpeg',
                        file_id: 'demo-file-id',
                    },
                    {
                        type: 'input_text',
                        text: '以下是文件展示',
                    },
                    {
                        type: 'input_file',
                        file_url: 'https://www.semi.pdf',
                        filename: 'semi.pdf',
                        size: '100KB',
                    },
                    {
                        type: 'input_file',
                        file_url: 'https://www.semi.json',
                        filename: 'semi.json',
                        size: '100KB',
                    },
                    {
                        type: 'input_file',
                        file_url: 'https://www.semi.docx',
                        filename: 'semi.docx',
                        size: '100KB',
                    },
                ],
            },
        ],
        status: 'completed',
    },
    {
        id: '3',
        role: 'assistant',
        content: [
            {
                type: 'reasoning',
                status: 'completed',
                summary: [
                    {
                        type: 'summary_text',
                        text: '\n我需要思考并回答用户关于什么是 Semi 组件库的问题...',
                    },
                ],
            },
            {
                type: 'message',
                content: [
                    {
                        type: 'output_text',
                        text: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统。',
                    },
                ],
                status: 'completed',
            },
            {
                id: 'fc_12345xyz',
                call_id: 'call_12345xyz',
                type: 'function_call',
                name: 'get_weather',
                status: 'completed',
                arguments: "{'location':'Paris, France'}",
            },
            {
                type: 'message',
                content: [
                    {
                        type: 'output_text',
                        text: '恭喜你，你已经掌握了 semi design 的所有知识！',
                        annotations: [
                            {
                                title: 'semi.design',
                                url: 'https://semi.design/',
                                detail: 'semi design page',
                                logo: '/assets/placeholder/logo.svg',
                            },
                            {
                                title: 'semi.design',
                                url: 'https://semi.design/',
                                detail: 'semi design page',
                                logo: '/assets/placeholder/logo.svg',
                            },
                        ],
                    },
                ],
            },
            {
                type: 'plan',
                content: [
                    {
                        summary: '创建一份全面的北京旅游攻略，包含景点、住宿、交通、美食和实用旅行建议',
                        steps: [
                            {
                                summary: '搜索北京旅游景点介绍及门票信息',
                                description: '正在搜索: 北京旅游景点介绍及门票信息',
                                type: 'search',
                            },
                            {
                                summary: '读取指定文件的指定行内容',
                                description: '正在创建文档:  北京旅游攻略',
                                type: 'docs',
                            },
                            {
                                summary: '创建包含北京旅游攻略的文件',
                                description: '正在创建代码文件: beijing_travel_guide.html',
                                type: 'code',
                            },
                        ],
                    },
                    {
                        summary: '总结北京旅游攻略的创建成果并呈现给用户',
                        steps: [],
                    },
                ],
            },
        ],
        status: 'completed',
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(defaultMessages);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const mapStep = useCallback((steps?: PlanStep[]) => {
        if (!steps) {
            return [];
        }
        return steps.map((item) => {
            let icon = null;
            switch (item.type) {
                case 'search':
                    icon = <IconSearchStroked />;
                    break;
                case 'docs':
                    icon = <IconBriefStroked />;
                    break;
                case 'code':
                    icon = <IconCodeStroked />;
                    break;
            }
            return {
                summary: item.summary,
                description: item.description,
                icon: icon,
            };
        });
    }, []);

    const customRender = useMemo<DialogueContentItemRendererMap>(
        () => ({
            plan: (item) => {
                let steps = item.content.map((item: { summary: string; steps?: PlanStep[] }) => {
                    return {
                        summary: item.summary,
                        actions: mapStep(item.steps),
                        status: 'completed',
                    };
                });
                return <AIChatDialogue.Step steps={steps} />;
            },
        }),
        [mapStep]
    );

    return <AIChatDialogue chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} renderDialogueContentItem={customRender} />;
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';

const defaultMessages = [
    {
        id: '1',
        role: 'user',
        content: '当前消息为引用 demo 的示例',
        references: [
            {
                id: '1',
                type: 'text',
                content: '测试文本，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字,这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字',
            },
            {
                id: '2',
                name: '飞书文档.docx',
            },
            {
                id: '3',
                name: 'Music.mp4',
            },
            {
                id: '4',
                name: 'Image.jpeg',
                url: '/assets/placeholder/avatar-b.svg',
            },
            {
                id: '5',
                name: 'code.json',
            },
        ],
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState<Message[]>(defaultMessages);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const onReferenceClick = () => {
        console.log('You click the reference button!');
    };

    return <AIChatDialogue chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} showReference onReferenceClick={onReferenceClick} />;
}

import { useState, useCallback, useRef, useEffect } from 'react';
import { AIChatDialogue, type AIChatDialogueHandle, type AIChatDialogueMessage as Message, type AIChatDialogueProps } from '@fibrous/semi-ai-react';
import { RadioGroup, Radio, type RadioChangeEvent } from '@fibrous/semi-ui-react';

const defaultMessages: Message[] = [
    {
        role: 'system',
        id: '1',
        createdAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createdAt: 1715676751919,
        content: '给一个 Semi Design 的 Button 组件的使用示例',
    },
    {
        role: 'assistant',
        id: '3',
        createdAt: 1715676751919,
        content: "以下是一个 Semi 代码的使用示例：\n```jsx \nimport React from 'react';\nimport { Button } from '@fibrous/semi-ui-react';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n```\n",
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const ref = useRef<AIChatDialogueHandle>(null);
    const [messages] = useState(defaultMessages);
    const [align, setAlign] = useState<AIChatDialogueProps['align']>('leftRight');
    const [select, setSelect] = useState(true);
    const [selection, setSelection] = useState('allSelect');

    useEffect(() => {
        ref.current?.selectAll();
    }, []);

    const onSelectChange = useCallback((e: RadioChangeEvent) => {
        setSelect(e.target.value);
    }, []);

    const onSelectionChange = useCallback((e: RadioChangeEvent) => {
        if (e.target.value === 'allSelect') {
            ref.current?.selectAll();
        } else {
            ref.current?.deselectAll();
        }
        setSelection(e.target.value);
    }, []);

    const onSelect = useCallback((selectionId: string[]) => {
        console.log('onSelect', selectionId);
    }, []);

    const onAlignChange = useCallback((e: RadioChangeEvent) => {
        setAlign(e.target.value);
    }, []);

    return (
        <div>
            <span style={{ display: 'flex', flexDirection: 'column', rowGap: '8px' }}>
                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px' }}>
                    会话布局方式
                    <RadioGroup onChange={onAlignChange} value={align} type="button">
                        <Radio value="leftRight">左右分布</Radio>
                        <Radio value="leftAlign">左对齐</Radio>
                    </RadioGroup>
                </span>
                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px' }}>
                    是否开启选择
                    <RadioGroup onChange={onSelectChange} value={select} type="button">
                        <Radio value>开启</Radio>
                        <Radio value={false}>关闭</Radio>
                    </RadioGroup>
                </span>
                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px' }}>
                    选择方式
                    <RadioGroup onChange={onSelectionChange} value={selection} type="button">
                        <Radio value="allSelect">全选</Radio>
                        <Radio value="cancelSelect">取消全选</Radio>
                    </RadioGroup>
                </span>
            </span>

            <div style={{ border: '1px solid var(--semi-color-border)', borderRadius: 12, marginTop: 10, padding: 20 }}>
                <AIChatDialogue ref={ref} align={align} mode="bubble" chats={messages} selecting={select} onSelect={onSelect} roleConfig={roleConfig} />
            </div>
        </div>
    );
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';

export default function AIChatDialogueDemo() {
    const defaultMessages = [
        {
            role: 'assistant',
            id: '1',
            createdAt: 1715676751919,
            content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
        },
    ];

    const hintsExample = ['Semi 组件库有哪些常用组件？', '能否展示一个使用 Semi 组件库构建的页面示例？', 'Semi 组件库有官方文档吗？'];

    const roleConfig = {
        user: {
            name: 'User',
            avatar: '/assets/docs-icon.png',
        },
        assistant: {
            name: 'Assistant',
            avatar: '/assets/placeholder/logo.svg',
        },
        system: {
            name: 'System',
            avatar: '/assets/placeholder/logo.svg',
        },
    };
    const [messages, setMessage] = useState<Message[]>(defaultMessages);
    const [hints, setHints] = useState(hintsExample);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const onHintClick = useCallback(() => {
        setHints([]);
    }, []);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} hints={hints} onHintClick={onHintClick} />;
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message, type AIChatDialogueProps } from '@fibrous/semi-ai-react';
import { IconArrowRight } from '@fibrous/semi-icons-react';

const commonHintStyle = {
    border: '1px solid var(--semi-color-border)',
    padding: '10px',
    borderRadius: '10px',
    backgroundColor: 'transparent',
    color: 'var( --semi-color-text-1)',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    cursor: 'pointer',
    font: 'inherit',
    fontSize: '14px',
};

type HintBoxProps = Parameters<NonNullable<AIChatDialogueProps['renderHintBox']>>[0];

export default function AIChatDialogueDemo() {
    const defaultMessages = [
        {
            role: 'assistant',
            id: '1',
            createdAt: 1715676751919,
            content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
        },
    ];

    const hintsExample = ['Semi 组件库有哪些常用组件？', '能否展示一个使用 Semi 组件库构建的页面示例？', 'Semi 组件库有官方文档吗？'];

    const roleConfig = {
        user: {
            name: 'User',
            avatar: '/assets/docs-icon.png',
        },
        assistant: {
            name: 'Assistant',
            avatar: '/assets/placeholder/logo.svg',
        },
        system: {
            name: 'System',
            avatar: '/assets/placeholder/logo.svg',
        },
    };
    const [messages, setMessage] = useState<Message[]>(defaultMessages);
    const [hints, setHints] = useState(hintsExample);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const onHintClick = useCallback(() => {
        setHints([]);
    }, []);

    const renderHintBox = useCallback(({ content, onHintClick }: HintBoxProps) => {
        return (
            <button type="button" style={commonHintStyle} onClick={onHintClick}>
                {content}
                <IconArrowRight style={{ marginLeft: 10 }} />
            </button>
        );
    }, []);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} hints={hints} onHintClick={onHintClick} renderHintBox={renderHintBox} />;
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message, type DialogueRenderConfig } from '@fibrous/semi-ai-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AIChatDialogueDemo() {
    const defaultMessages = [
        {
            role: 'system',
            id: '1',
            createdAt: 1715676751919,
            content: "Hello, I'm your AI assistant.",
        },
        {
            role: 'user',
            id: '2',
            createdAt: 1715676751919,
            content: '给一个 Semi Design 的 Button 组件的使用示例',
        },
        {
            role: 'assistant',
            id: '3',
            createdAt: 1715676751919,
            content: "以下是一个 Semi 代码的使用示例：\n```jsx \nimport React from 'react';\nimport { Button } from '@fibrous/semi-ui-react';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n```\n",
        },
    ];

    const roleConfig = {
        user: {
            name: 'User',
            avatar: '/assets/docs-icon.png',
        },
        assistant: {
            name: 'Assistant',
            avatar: '/assets/placeholder/logo.svg',
        },
        system: {
            name: 'System',
            avatar: '/assets/placeholder/logo.svg',
        },
    };

    const [messages, setMessage] = useState<Message[]>(defaultMessages);
    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const renderConfig: DialogueRenderConfig = {
        renderDialogueTitle: (props) => {
            return <div className="semi-ai-chat-dialogue-title">My-{props.role?.name}</div>;
        },
        renderDialogueAvatar: (props) => {
            return <Avatar src={props.role?.avatar} alt="" size="extra-small" shape="square" />;
        },
        renderDialogueAction: (props) => {
            return <div className={props.className}>{Array.isArray(props.defaultActions) && props.defaultActions[0]}</div>;
        },
    };

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} dialogueRenderConfig={renderConfig} />;
}

import React, { useState, useCallback } from 'react';
import { AIChatDialogue, type AIChatDialogueMessage as Message, type AIChatDialogueAnnotation as Annotation, type DialogueContentItemRendererMap, type ReasoningWidgetProps } from '@fibrous/semi-ai-react';
import { MarkdownRender, Toast } from '@fibrous/semi-ui-react';

const defaultMessages: Message[] = [
    {
        id: '1',
        role: 'user',
        content: '你好',
    },
    {
        id: '2',
        role: 'assistant',
        content: '你好呀，请问有什么可以帮助你的吗~',
        status: 'completed',
    },
    {
        id: '3',
        role: 'user',
        content: [
            {
                type: 'message',
                role: 'user',
                content: [
                    {
                        type: 'input_text',
                        text: '帮我生成类似的图片',
                    },
                    {
                        type: 'input_image',
                        image_url: '/assets/root-web-sites/edit-bag.jpeg',
                        file_id: 'demo-file-id',
                    },
                    {
                        type: 'input_image',
                        image_url: '/assets/root-web-sites/edit-bag.jpeg',
                        file_id: 'demo-file-id',
                    },
                ],
            },
        ],
    },
    {
        id: '4',
        role: 'assistant',
        content: [
            {
                type: 'reasoning',
                summary: [
                    {
                        type: 'summary_text',
                        text: '\n用户问需要我帮助他生成类似图片，我需要先分析图片内容，然后生成类似的图片...',
                    },
                ],
                annotations: [
                    {
                        title: 'semi.design',
                        url: 'https://semi.design/',
                        detail: 'semi design page',
                        logo: '/assets/placeholder/logo.svg',
                    },
                    {
                        title: 'semi.design',
                        url: 'https://semi.design/',
                        detail: 'semi design page',
                        logo: '/assets/placeholder/logo.svg',
                    },
                ],
                status: 'completed',
            },
            {
                type: 'function_call',
                name: 'create_travel_guide',
                arguments: '{\n"city": "北京"\n}',
                status: 'completed',
            },
        ],
        status: 'completed',
    },
];

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(defaultMessages);
    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    const userTextStyle = {
        backgroundColor: 'var(--semi-color-fill-1)',
        color: 'var(--semi-color-text-0)',
        borderRadius: '25px',
        padding: '6px 16px',
    };

    const assistantStyle = {
        color: 'var(--semi-color-text-0)',
        padding: '6px 16px',
    };

    const functionCallStyle = {
        backgroundColor: 'var(--semi-color-fill-1)',
        padding: '6px 16px',
        borderRadius: '25px',
    };

    const customRenderReasoningContent = useCallback((props: ReasoningWidgetProps) => {
        // the reasoning item also carries its annotations, which the widget props do not declare
        const { annotations = [] } = props as ReasoningWidgetProps & { annotations?: Annotation[] };
        return (
            <React.Fragment>
                <AIChatDialogue.Annotation
                    annotation={annotations}
                    description="参考资料"
                    maxCount={3}
                    onClick={(e) => {
                        e?.stopPropagation();
                        Toast.success('Ready to open the sidebar!');
                    }}
                />
                <div style={{ marginTop: '8px' }}>
                    <MarkdownRender format="md" raw={props.summary?.[0].text ?? ''} {...props.markdownRenderProps} />
                </div>
            </React.Fragment>
        );
    }, []);

    const customRender: DialogueContentItemRendererMap = {
        function_call: {
            create_travel_guide: (item) => {
                return (
                    <div style={functionCallStyle}>
                        Function Tool Call: {item.name} {item.arguments}
                    </div>
                );
            },
        },
        input_text: (item, message) => {
            if (message?.role === 'user') {
                return (
                    <div style={userTextStyle} className="userTextStyle">
                        {item.text}
                    </div>
                );
            }
            return <div style={assistantStyle}>{item.text}</div>;
        },
        reasoning: (item) => {
            return <AIChatDialogue.Reasoning {...item} customRenderer={customRenderReasoningContent} />;
        },
        default: (item, message) => {
            if (message?.role === 'user') {
                return (
                    <div style={userTextStyle} className="userTextStyle">
                        {item}
                    </div>
                );
            } else {
                return <div style={assistantStyle}>{item}</div>;
            }
        },
    };

    return <AIChatDialogue chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} renderDialogueContentItem={customRender} />;
}

import { useState, useCallback } from 'react';
import { AIChatDialogue, chatCompletionToMessage, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(() => chatCompletionToMessage(CHAT_COMPLETION_DATA));

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />;
}

const CHAT_COMPLETION_DATA = {
    id: 'chatcmpl-B9MBs8CjcvOU2jLn4n570S5qMJKcT',
    object: 'chat.completion',
    created: 1741569952,
    model: 'gpt-4.1-2025-04-14',
    choices: [
        {
            index: 0,
            message: {
                role: 'assistant',
                content: 'Hello! How can I assist you today?',
                refusal: null,
                annotations: [],
                tool_calls: [
                    {
                        id: 'call_abc123',
                        type: 'function',
                        function: {
                            name: 'get_current_weather',
                            arguments: '{\n"location": "Boston, MA"\n}',
                        },
                    },
                ],
            },
            logprobs: null,
            finish_reason: 'stop',
        },
    ],
    // ...
};

import { useState, useCallback, useEffect } from 'react';
import { AIChatDialogue, streamingChatCompletionToMessage, type AIChatDialogueMessage as Message, type StreamingChatState } from '@fibrous/semi-ai-react';

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState<Message[]>([]);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    useEffect(() => {
        const total = STREAMING_CHAT_COMPLETION_DATA.length;
        let i = 1;
        let state: StreamingChatState | undefined;

        const timer = setInterval(() => {
            if (i > total) {
                clearInterval(timer);
                return;
            }

            const slice = STREAMING_CHAT_COMPLETION_DATA.slice(0, i);
            const { messages: partialMessages, state: nextState } = streamingChatCompletionToMessage(slice, state);
            state = nextState;

            setMessage([partialMessages[0]]);

            i += 1;
        }, 100);

        return () => clearInterval(timer);
    }, []);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />;
}

const STREAMING_CHAT_COMPLETION_DATA = [
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { role: 'assistant', content: '', refusal: null }, finish_reason: null }],
        obfuscation: 'ahPqlzj6DD',
    },
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { content: '' }, finish_reason: null }],
        obfuscation: 'i2PXRIwvc3D',
    },
    // index 0: output text delta
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { content: '我正在使用 ' }, finish_reason: null }],
        obfuscation: '3sslO5QylW',
    },
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { content: 'streamingChatCompletionToMessage' }, finish_reason: null }],
        obfuscation: '3sslO5QylW',
    },

    // index 1: tool call delta (function_call / tool_calls)
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011845,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [
            {
                index: 1,
                delta: {
                    tool_calls: [{ index: 0, id: 'call_1', function: { name: 'searchWeather', arguments: '{"city":"北京"' } }],
                },
                finish_reason: null,
            },
        ],
        obfuscation: 'T1',
    },
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011846,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [
            {
                index: 1,
                delta: { tool_calls: [{ index: 0, function: { arguments: ',"day":"today"}' } }] },
                finish_reason: null,
            },
        ],
        obfuscation: 'T2',
    },

    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011844,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { content: ' 转换 Chat Completion Chunks' }, finish_reason: null }],
        obfuscation: 'X1',
    },
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011844,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: { content: ' 🥳' }, finish_reason: null }],
        obfuscation: 'X2',
    },

    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 0, delta: {}, finish_reason: 'stop' }],
        obfuscation: 'n13SLf',
    },
    {
        id: 'chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT',
        object: 'chat.completion.chunk',
        created: 1760011843,
        model: 'o3-mini-2025-01-31',
        service_tier: 'default',
        system_fingerprint: 'fp_6c43dcef8c',
        choices: [{ index: 1, delta: {}, finish_reason: 'stop' }],
        obfuscation: 'jt9rDb',
    },
];

import { useState, useCallback } from 'react';
import { AIChatDialogue, responseToMessage, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-react';

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState(() => [responseToMessage(RESPONSE_DATA)]);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />;
}

const RESPONSE_DATA = {
    id: 'resp_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41',
    object: 'response',
    created_at: 1741476777,
    status: 'completed',
    error: null,
    incomplete_details: null,
    instructions: null,
    max_output_tokens: null,
    model: 'gpt-4o-2024-08-06',
    output: [
        {
            id: 'rs_6876cf02e0bc8192b74af0fb64b715ff06fa2fcced15a5ac',
            type: 'reasoning',
            status: 'completed',
            summary: [
                {
                    type: 'summary_text',
                    text: '**用户询问什么是 Semi Design** 用户问 “Semi Design”需整合多源信息。首先发现抖音的 Semi Design 是设计系统，支持多平台且含 Design Token 和代码转换工具。印度 Semi Design 专注半导体培训，但用户可能更关注抖音案例。其他结果涉及半定制设计，但关联性较低。需确认是否有其他解释，但当前信息已覆盖主要维度。虽然继续推理可能提高完备性，但现阶段已足够支撑答案，可以开始输出给用户。',
                },
            ],
        },
        {
            type: 'message',
            id: 'msg_67ccd3acc8d48190a77525dc6de64b4104becb25c45c1d41',
            status: 'completed',
            role: 'assistant',
            content: [
                {
                    type: 'output_text',
                    text: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统',
                    annotations: [
                        {
                            title: 'Semi Design',
                            url: 'https://semi.design/zh-CN/start/getting-started',
                            detail: 'Semi Design 快速开始',
                            logo: '/assets/docs-icon.png',
                        },
                        {
                            title: 'Semi Design',
                            url: 'https://semi.design/zh-CN/start/getting-started',
                            detail: 'Semi Design 快速开始',
                            logo: '/assets/docs-icon.png',
                        },
                        {
                            title: 'Semi Design',
                            url: 'https://semi.design/zh-CN/start/getting-started',
                            detail: 'Semi Design 快速开始',
                            logo: '/assets/docs-icon.png',
                        },
                    ],
                },
            ],
        },
        {
            id: 'fc_12345xyz',
            call_id: 'call_12345xyz',
            type: 'function_call',
            name: 'get_semi_page',
            status: 'completed',
            arguments: '{"pageName":"AIChatDialogue"}',
        },
    ],
    // ...
};

import { useState, useCallback, useEffect } from 'react';
import { AIChatDialogue, streamingResponseToMessage, type AIChatDialogueMessage as Message, type ResponseChunk, type StreamingResponseState } from '@fibrous/semi-ai-react';

const roleConfig = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const FIXED_SHUFFLED_INDICES = [
    0,
    1,
    2,
    3,
    4,
    6, // chunk 5 skipped
    6, // chunk 6 arrives twice
    7,
    5, // chunk 5 arrives late
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
];

export default function AIChatDialogueDemo() {
    const [messages, setMessage] = useState<Message[]>([]);
    const [currentState, setCurrentState] = useState<StreamingResponseState | undefined>();
    const [currentLength, setCurrentLength] = useState(0);

    const onChatsChange = useCallback((chats: Message[]) => {
        setMessage(chats);
    }, []);

    useEffect(() => {
        if (currentLength > FIXED_SHUFFLED_INDICES.length) {
            return;
        }

        const timer = setTimeout(() => {
            if (currentLength === 0) {
                setCurrentLength(1);
                return;
            }

            const currentIndices = FIXED_SHUFFLED_INDICES.slice(0, currentLength);
            const currentChunks = currentIndices.map((index) => REASONING_CHUNKS[index]);

            const result = streamingResponseToMessage(currentChunks, currentState);

            if (result) {
                const { message: responseMessage, nextState } = result;
                if (responseMessage) {
                    setMessage([responseMessage]);
                    setCurrentState(nextState);
                }
            }
            setCurrentLength((prev) => prev + 1);
        }, 200);

        return () => clearTimeout(timer);
    }, [currentLength, currentState]);

    return <AIChatDialogue align="leftRight" mode="bubble" chats={messages} roleConfig={roleConfig} onChatsChange={onChatsChange} />;
}

const REASONING_CHUNKS: ResponseChunk[] = [
    {
        type: 'response.created',
        sequence_number: 0,
        response: {
            id: 'resp_reason_001',
            object: 'response',
            created_at: 1760091777,
            status: 'in_progress',
            background: false,
            error: null,
            incomplete_details: null,
            instructions: null,
            max_output_tokens: null,
            max_tool_calls: null,
            model: 'o3-mini-2025-01-31',
            output: [],
            parallel_tool_calls: true,
            previous_response_id: null,
            prompt_cache_key: null,
            reasoning: { effort: 'medium', summary: null },
            safety_identifier: null,
            service_tier: 'auto',
            store: true,
            temperature: 1.0,
            text: { format: { type: 'text' }, verbosity: 'medium' },
            tool_choice: 'auto',
            tools: [],
            top_logprobs: 0,
            top_p: 1.0,
            truncation: 'disabled',
            usage: null,
            user: null,
            metadata: {},
        },
    },
    {
        type: 'response.in_progress',
        sequence_number: 1,
        response: {
            id: 'resp_reason_001',
            object: 'response',
            created_at: 1760091777,
            status: 'in_progress',
            background: false,
            error: null,
            incomplete_details: null,
            instructions: null,
            max_output_tokens: null,
            max_tool_calls: null,
            model: 'o3-mini-2025-01-31',
            output: [],
            parallel_tool_calls: true,
            previous_response_id: null,
            prompt_cache_key: null,
            reasoning: { effort: 'medium', summary: null },
            safety_identifier: null,
            service_tier: 'auto',
            store: true,
            temperature: 1.0,
            text: { format: { type: 'text' }, verbosity: 'medium' },
            tool_choice: 'auto',
            tools: [],
            top_logprobs: 0,
            top_p: 1.0,
            truncation: 'disabled',
            usage: null,
            user: null,
            metadata: {},
        },
    },

    // reasoning item (output index 0)
    {
        type: 'response.output_item.added',
        sequence_number: 2,
        output_index: 0,
        item: { id: 'rs_reason_001', type: 'reasoning', summary: [] },
    },
    {
        type: 'response.reasoning_summary_part.added',
        sequence_number: 3,
        output_index: 0,
        summary_index: 0,
        part: { type: 'reasoning', text: '' },
    },
    {
        type: 'response.reasoning_summary_text.delta',
        sequence_number: 4,
        output_index: 0,
        summary_index: 0,
        delta: '思',
    },
    {
        type: 'response.reasoning_summary_text.delta',
        sequence_number: 5,
        output_index: 0,
        summary_index: 0,
        delta: '考',
    },
    {
        type: 'response.reasoning_summary_text.delta',
        sequence_number: 6,
        output_index: 0,
        summary_index: 0,
        delta: '完',
    },
    {
        type: 'response.reasoning_summary_text.delta',
        sequence_number: 7,
        output_index: 0,
        summary_index: 0,
        delta: '成',
    },
    {
        type: 'response.reasoning_summary_text.delta',
        sequence_number: 8,
        output_index: 0,
        summary_index: 0,
        delta: '！',
    },
    {
        type: 'response.reasoning_summary_text.done',
        sequence_number: 9,
        output_index: 0,
        summary_index: 0,
        text: '思考完成！',
    },
    {
        type: 'response.output_item.done',
        sequence_number: 10,
        output_index: 0,
        item: { id: 'rs_reason_001', type: 'reasoning', summary: [{ type: 'reasoning', text: '思考完成！' }] },
    },

    // assistant message (output index 1)
    {
        type: 'response.output_item.added',
        sequence_number: 11,
        output_index: 1,
        item: { id: 'msg_reason_001', type: 'message', status: 'in_progress', content: [], role: 'assistant' },
    },
    {
        type: 'response.content_part.added',
        sequence_number: 12,
        output_index: 1,
        content_index: 0,
        part: { type: 'output_text', annotations: [], text: '' },
    },
    {
        type: 'response.output_text.delta',
        sequence_number: 13,
        output_index: 1,
        content_index: 0,
        delta: '基于上述思考，',
    },
    {
        type: 'response.output_text.delta',
        sequence_number: 14,
        output_index: 1,
        content_index: 0,
        delta: '结论如下：',
    },
    {
        type: 'response.output_text.done',
        sequence_number: 15,
        output_index: 1,
        content_index: 0,
        text: '基于上述思考，结论如下：...',
    },

    {
        type: 'response.completed',
        sequence_number: 16,
        response: {
            id: 'resp_reason_001',
            object: 'response',
            created_at: 1760091777,
            status: 'completed',
            background: false,
            error: null,
            incomplete_details: null,
            instructions: null,
            max_output_tokens: null,
            max_tool_calls: null,
            model: 'o3-mini-2025-01-31',
            output: [
                { id: 'rs_reason_001', type: 'reasoning', summary: [{ type: 'reasoning', text: '思考完成！' }] },
                {
                    id: 'msg_reason_001',
                    type: 'message',
                    status: 'completed',
                    content: [{ type: 'output_text', annotations: [], text: '基于上述思考，结论如下：...' }],
                    role: 'assistant',
                },
            ],
            parallel_tool_calls: true,
            previous_response_id: null,
            prompt_cache_key: null,
            reasoning: { effort: 'medium', summary: null },
            safety_identifier: null,
            service_tier: 'default',
            store: true,
            temperature: 1.0,
            text: { format: { type: 'text' }, verbosity: 'medium' },
            tool_choice: 'auto',
            tools: [],
            top_logprobs: 0,
            top_p: 1.0,
            truncation: 'disabled',
            usage: {
                input_tokens: 12,
                input_tokens_details: { cached_tokens: 0 },
                output_tokens: 120,
                output_tokens_details: { reasoning_tokens: 16 },
                total_tokens: 132,
            },
            user: null,
            metadata: {},
        },
    },
];