AI对话

<script setup lang="ts">
    import { ref, shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message, type AIChatDialogueProps } from '@fibrous/semi-ai-vue';
    import { Radio, RadioGroup, type RadioChangeEvent } from '@fibrous/semi-ui-vue';

    type Mode = NonNullable<AIChatDialogueProps['mode']>;
    type Align = NonNullable<AIChatDialogueProps['align']>;

    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 = shallowRef<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 mode = ref<Mode>('bubble');
    const align = ref<Align>('leftRight');

    const onModeChange = (e: RadioChangeEvent) => {
        mode.value = e.target.value as Mode;
    };
    const onAlignChange = (e: RadioChangeEvent) => {
        align.value = e.target.value as Align;
    };
</script>

<template>
    <span :style="{ display: 'flex', flexDirection: 'column', rowGap: '8px' }">
        <span :style="{ display: 'flex', alignItems: 'center', columnGap: '10px' }">
            模式
            <RadioGroup aria-label="模式" :modelValue="mode" type="button" @change="onModeChange">
                <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="会话布局方式" :modelValue="align" type="button" @change="onAlignChange">
                <Radio value="leftRight">左右分布</Radio>
                <Radio value="leftAlign">左对齐</Radio>
            </RadioGroup>
        </span>
    </span>
    <div
        :style="{
            border: '1px solid var(--semi-color-border)',
            borderRadius: '12px',
            marginTop: '10px',
            padding: '20px',
        }"
    >
        <AIChatDialogue :key="align + mode" v-model:chats="messages" :align="align" :mode="mode" :roleConfig="roleConfig" />
    </div>
</template>

<script setup lang="ts">
    import { onBeforeUnmount, ref, shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { Button } from '@fibrous/semi-ui-vue';

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

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

    const messages = shallowRef<Message[]>([{ role: 'assistant', id: 'welcome', content: '点击下方按钮发送消息，回复会以流式方式逐步生成。' }]);
    const streaming = ref(false);
    let timer: ReturnType<typeof setInterval> | undefined;

    onBeforeUnmount(() => clearInterval(timer));

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

<template>
    <Button :disabled="streaming" :style="{ marginBottom: '12px' }" @click="send">发送消息</Button>
    <div :style="{ height: '320px' }">
        <AIChatDialogue v-model:chats="messages" :roleConfig="roleConfig" />
    </div>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';

    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',
        },
    };

    const messages = shallowRef(defaultMessages);
</script>

<template>
    <AIChatDialogue v-model:chats="messages" :roleConfig="roleConfig" />
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { IconBriefStroked, IconCodeStroked, IconSearchStroked } from '@fibrous/semi-icons-vue';

    // A type alias, not an interface: only an alias is assignable to the step action's index signature
    type PlanStep = {
        type?: string;
        summary?: string;
        description?: string;
    };

    interface PlanItem {
        summary: string;
        steps?: PlanStep[];
    }

    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',
        },
    };

    const messages = shallowRef(defaultMessages);

    // plan is a user-defined content type; its icons come from the #actionIcon slot, so the steps carry data only
    const toSteps = (item: unknown) =>
        (item as { content: PlanItem[] }).content.map((plan) => ({
            summary: plan.summary,
            actions: plan.steps ?? [],
            status: 'completed',
        }));
</script>

<template>
    <AIChatDialogue v-model:chats="messages" :roleConfig="roleConfig">
        <template #contentItem="{ item, type }">
            <AIChatDialogue.Step v-if="type === 'plan'" :steps="toSteps(item)">
                <template #actionIcon="{ item: action }">
                    <IconSearchStroked v-if="action.type === 'search'" />
                    <IconBriefStroked v-else-if="action.type === 'docs'" />
                    <IconCodeStroked v-else-if="action.type === 'code'" />
                </template>
            </AIChatDialogue.Step>
        </template>
    </AIChatDialogue>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';

    const defaultMessages: Message[] = [
        {
            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',
        },
    };

    const messages = shallowRef(defaultMessages);

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

<template>
    <AIChatDialogue v-model:chats="messages" :roleConfig="roleConfig" showReference @referenceClick="onReferenceClick" />
</template>

<script setup lang="ts">
    import { onMounted, ref, useTemplateRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueHandle, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { Radio, RadioGroup } from '@fibrous/semi-ui-vue';

    const messages: 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',
        },
    };

    // A Radio value of true cannot use the bare-attribute shorthand: the prop accepts strings, so it would be ''.
    const selectOptions = [
        { label: '开启', value: true },
        { label: '关闭', value: false },
    ];

    const dialogue = useTemplateRef<AIChatDialogueHandle>('dialogue');
    const align = ref<'leftRight' | 'leftAlign'>('leftRight');
    const select = ref(true);
    const selection = ref<'allSelect' | 'cancelSelect'>('allSelect');

    onMounted(() => dialogue.value?.selectAll());

    const onSelectionChange = (value: unknown) => {
        if (value === 'allSelect') {
            dialogue.value?.selectAll();
            selection.value = value;
        } else if (value === 'cancelSelect') {
            dialogue.value?.deselectAll();
            selection.value = value;
        }
    };

    const onAlignChange = (value: unknown) => {
        if (value === 'leftRight' || value === 'leftAlign') align.value = value;
    };

    const onSelectChange = (value: unknown) => {
        if (typeof value === 'boolean') select.value = value;
    };

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

<template>
    <div>
        <span :style="{ display: 'flex', flexDirection: 'column', rowGap: '8px' }">
            <span :style="{ display: 'flex', alignItems: 'center', columnGap: '10px' }">
                会话布局方式
                <RadioGroup :modelValue="align" type="button" @update:modelValue="onAlignChange">
                    <Radio value="leftRight">左右分布</Radio>
                    <Radio value="leftAlign">左对齐</Radio>
                </RadioGroup>
            </span>
            <span :style="{ display: 'flex', alignItems: 'center', columnGap: '10px' }">
                是否开启选择
                <RadioGroup :modelValue="select" type="button" @update:modelValue="onSelectChange">
                    <Radio v-for="option in selectOptions" :key="option.label" :value="option.value">
                        {{ option.label }}
                    </Radio>
                </RadioGroup>
            </span>
            <span :style="{ display: 'flex', alignItems: 'center', columnGap: '10px' }">
                选择方式
                <RadioGroup :modelValue="selection" type="button" @update:modelValue="onSelectionChange">
                    <Radio value="allSelect">全选</Radio>
                    <Radio value="cancelSelect">取消全选</Radio>
                </RadioGroup>
            </span>
        </span>

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

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';

    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 = shallowRef<Message[]>([
        {
            role: 'assistant',
            id: '1',
            createdAt: 1715676751919,
            content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
        },
    ]);
    const hints = shallowRef(['Semi 组件库有哪些常用组件？', '能否展示一个使用 Semi 组件库构建的页面示例？', 'Semi 组件库有官方文档吗？']);
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" :hints="hints" mode="bubble" :roleConfig="roleConfig" @hintClick="hints = []" />
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { IconArrowRight } from '@fibrous/semi-icons-vue';

    const hintStyle = {
        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',
    };

    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 = shallowRef<Message[]>([
        {
            role: 'assistant',
            id: '1',
            createdAt: 1715676751919,
            content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
        },
    ]);
    const hints = shallowRef(['Semi 组件库有哪些常用组件？', '能否展示一个使用 Semi 组件库构建的页面示例？', 'Semi 组件库有官方文档吗？']);
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" :hints="hints" mode="bubble" :roleConfig="roleConfig" @hintClick="hints = []">
        <template #hintBox="{ content, onHintClick }">
            <button :style="hintStyle" type="button" @click="onHintClick">
                {{ content }}
                <IconArrowRight :style="{ marginLeft: '10px' }" />
            </button>
        </template>
    </AIChatDialogue>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { Avatar } from '@fibrous/semi-ui-vue';

    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 = shallowRef<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",
        },
    ]);
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" mode="bubble" :roleConfig="roleConfig">
        <template #title="{ role }">
            <div class="semi-ai-chat-dialogue-title">My-{{ role?.name }}</div>
        </template>
        <template #avatar="{ role }">
            <Avatar alt="" shape="square" size="extra-small" :src="role?.avatar" />
        </template>
        <template #action="{ defaultActions, class: className }">
            <div :class="className">
                <component :is="defaultActions[0]" />
            </div>
        </template>
    </AIChatDialogue>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, type AIChatDialogueAnnotation as Annotation, type AIChatDialogueContentItemSlotProps as ContentItemSlotProps, type AIChatDialogueMessage as Message } from '@fibrous/semi-ai-vue';
    import { MarkdownRender, Toast } from '@fibrous/semi-ui-vue';

    // The fields of the content items this demo renders; the slot types `item` as the union of every item type.
    interface DemoItem {
        name?: string;
        arguments?: string;
        text?: string;
        status?: string;
        summary?: { text?: string; type?: string }[];
        annotations?: Annotation[];
    }

    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 = shallowRef<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 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 fields = (item: ContentItemSlotProps['item']) => item as DemoItem;

    const onAnnotationClick = (e: MouseEvent | KeyboardEvent) => {
        e.stopPropagation();
        Toast.success('Ready to open the sidebar!');
    };
</script>

<template>
    <AIChatDialogue v-model:chats="messages" :roleConfig="roleConfig">
        <template #contentItem="{ item, type, message }">
            <div v-if="type === 'function_call' && fields(item).name === 'create_travel_guide'" :style="functionCallStyle">Function Tool Call: {{ fields(item).name }} {{ fields(item).arguments }}</div>
            <template v-else-if="type === 'input_text'">
                <div v-if="message.role === 'user'" class="userTextStyle" :style="userTextStyle">
                    {{ fields(item).text }}
                </div>
                <div v-else :style="assistantStyle">{{ fields(item).text }}</div>
            </template>
            <AIChatDialogue.Reasoning v-else-if="type === 'reasoning'" :status="fields(item).status" :summary="fields(item).summary">
                <template #content="{ summary, markdownRenderProps }">
                    <AIChatDialogue.Annotation :annotation="fields(item).annotations ?? []" description="参考资料" :maxCount="3" @click="onAnnotationClick" />
                    <div :style="{ marginTop: '8px' }">
                        <MarkdownRender format="md" v-bind="markdownRenderProps" :raw="summary?.[0]?.text ?? ''" />
                    </div>
                </template>
            </AIChatDialogue.Reasoning>
        </template>
        <template #messageText="{ text, message }">
            <div v-if="message.role === 'user'" class="userTextStyle" :style="userTextStyle">{{ text }}</div>
            <div v-else :style="assistantStyle">{{ text }}</div>
        </template>
    </AIChatDialogue>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, chatCompletionToMessage } from '@fibrous/semi-ai-vue';

    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',
            },
        ],
        // ...
    };

    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 = shallowRef(chatCompletionToMessage(CHAT_COMPLETION_DATA));
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" mode="bubble" :roleConfig="roleConfig" />
</template>

<script setup lang="ts">
    import { onBeforeUnmount, onMounted, shallowRef } from 'vue';
    import { AIChatDialogue, streamingChatCompletionToMessage, type AIChatDialogueMessage as Message, type StreamingChatState } from '@fibrous/semi-ai-vue';

    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 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',
        },
    ];

    const messages = shallowRef<Message[]>([]);
    let timer: ReturnType<typeof setInterval> | undefined;

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

        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;

            messages.value = [partialMessages[0]];

            i += 1;
        }, 100);
    });

    onBeforeUnmount(() => clearInterval(timer));
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" mode="bubble" :roleConfig="roleConfig" />
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { AIChatDialogue, responseToMessage } from '@fibrous/semi-ai-vue';

    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 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"}',
            },
        ],
        // ...
    };

    const messages = shallowRef([responseToMessage(RESPONSE_DATA)]);
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" mode="bubble" :roleConfig="roleConfig" />
</template>

<script setup lang="ts">
    import { onBeforeUnmount, onMounted, shallowRef } from 'vue';
    import { AIChatDialogue, streamingResponseToMessage, type AIChatDialogueMessage as Message, type ResponseChunk, type StreamingResponseState } from '@fibrous/semi-ai-vue';

    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,
    ];

    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: {},
            },
        },
    ];

    const messages = shallowRef<Message[]>([]);
    let timer: ReturnType<typeof setTimeout> | undefined;

    onMounted(() => {
        let currentLength = 0;
        let currentState: StreamingResponseState | undefined;

        const tick = () => {
            timer = setTimeout(() => {
                if (currentLength > 0) {
                    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) {
                            messages.value = [responseMessage];
                            currentState = nextState;
                        }
                    }
                }
                currentLength += 1;
                if (currentLength <= FIXED_SHUFFLED_INDICES.length) {
                    tick();
                }
            }, 200);
        };
        tick();
    });

    onBeforeUnmount(() => clearTimeout(timer));
</script>

<template>
    <AIChatDialogue v-model:chats="messages" align="leftRight" mode="bubble" :roleConfig="roleConfig" />
</template>