能力介绍

<script lang="ts">
    import { IconAIBellLevel1, IconAIEditLevel1, IconAIEditLevel2, IconAIFileLevel3, IconAIFilledLevel1, IconAIFilledLevel3, IconAIImageLevel3, IconAILoading, IconAISearchLevel3, IconAIStrokedLevel3, IconAIWandLevel3 } from '@fibrae/semi-icons-svelte';
    import { Button, FloatButton, Tag, TypographyTitle } from '@fibrae/semi-ui-svelte';

    const wandFill = ['var(--semi-color-danger)', 'var(--semi-color-success)', 'var(--semi-color-primary)', 'var(--semi-color-warning)'];
    const swatchCount = Array.from({ length: 10 }, (_, index) => index);
    const colorStyle = (color: string) => `width: 40px; height: 40px; background: ${color}; border-radius: 50%`;
    const grid = 'display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: fit-content';
</script>

{#snippet level1()}
    <IconAIFilledLevel1 />
{/snippet}
{#snippet level3()}
    <IconAIFilledLevel3 />
{/snippet}
{#snippet tagLevel1()}
    <IconAIFilledLevel1 size="small" />
{/snippet}
{#snippet tagLevel3()}
    <IconAIFilledLevel3 size="small" />
{/snippet}
{#snippet editLevel1()}
    <IconAIEditLevel1 />
{/snippet}

<div style="display: flex; flex-direction: column; row-gap: 20px">
    <div style="display: flex; flex-direction: column; row-gap: 10px">
        <TypographyTitle heading={5}>AI Token</TypographyTitle>
        <div style="display: flex; align-items: center; column-gap: 10px">
            <span>Purple</span>
            <div style="display: inline-flex; column-gap: 4px">
                {#each swatchCount as index (index)}
                    <div style={colorStyle(`var(--semi-ai-purple-${index})`)}></div>
                {/each}
            </div>
        </div>
        <div style="display: flex; align-items: center; column-gap: 10px">
            <span>General</span>
            <div style="display: inline-flex; column-gap: 4px">
                {#each swatchCount as index (index)}
                    <div style={colorStyle(`var(--semi-ai-general-${index})`)}></div>
                {/each}
            </div>
        </div>
    </div>
    <div style="display: flex; flex-direction: column; row-gap: 10px">
        <TypographyTitle heading={5}>AI Icon</TypographyTitle>
        <div style="display: flex; column-gap: 10px">
            <IconAIBellLevel1 size="extra-large" />
            <IconAIEditLevel2 size="extra-large" />
            <IconAIFileLevel3 size="extra-large" />
            <IconAIFilledLevel3 size="extra-large" />
            <IconAIImageLevel3 size="extra-large" />
            <IconAISearchLevel3 size="extra-large" />
            <IconAIStrokedLevel3 size="extra-large" />
            <IconAIWandLevel3 fill={wandFill} size="extra-large" />
            <IconAILoading size="extra-large" />
        </div>
    </div>
    <div style="display: flex; flex-direction: column; row-gap: 10px">
        <TypographyTitle heading={5}>AI Button</TypographyTitle>
        <div style="display: flex; row-gap: 16px; flex-direction: column">
            <div style="display: flex; column-gap: 16px">
                <Button colorful icon={level1} theme="solid" type="primary">Colorful</Button>
                <Button colorful loading theme="solid" type="primary">Colorful</Button>
                <Button colorful disabled icon={level1} theme="solid" type="primary">Colorful</Button>
            </div>
            <div style="display: flex; column-gap: 16px">
                <Button colorful icon={level3} theme="solid" type="tertiary">Colorful</Button>
                <Button colorful loading theme="solid" type="tertiary">Colorful</Button>
                <Button colorful disabled icon={level3} theme="solid" type="tertiary">Colorful</Button>
            </div>
            <div style="display: flex; column-gap: 16px">
                <Button aria-label="AI" colorful icon={level1} theme="solid" type="primary" />
                <Button aria-label="AI" colorful loading theme="solid" type="primary" />
                <Button aria-label="AI" colorful disabled icon={level1} theme="solid" type="primary" />
                <Button aria-label="AI" colorful icon={level3} theme="solid" type="tertiary" />
                <Button aria-label="AI" colorful loading theme="solid" type="tertiary" />
                <Button aria-label="AI" colorful disabled icon={level3} theme="solid" type="tertiary" />
            </div>
        </div>
    </div>
    <div style="display: flex; flex-direction: column; row-gap: 10px">
        <TypographyTitle heading={5} style="margin-top: 10px">AI Tag</TypographyTitle>
        <div style={grid}>
            <Tag colorful gradient prefixIcon={tagLevel1} shape="circle" type="solid">AI</Tag>
            <Tag colorful gradient prefixIcon={tagLevel3} shape="circle" type="light">AI</Tag>
            <Tag colorful gradient prefixIcon={tagLevel3} shape="circle" type="ghost">AI</Tag>
            <Tag colorful prefixIcon={tagLevel1} shape="circle" type="solid">AI</Tag>
            <Tag colorful prefixIcon={tagLevel1} shape="circle" type="light">AI</Tag>
            <Tag colorful prefixIcon={tagLevel1} shape="circle" type="ghost">AI</Tag>
        </div>
    </div>
    <div style="display: flex; flex-direction: column; row-gap: 10px">
        <TypographyTitle heading={5} style="margin-top: 10px">AI FloatButton</TypographyTitle>
        <div style={grid}>
            <FloatButton aria-label="AI edit, VIP" badge={{ count: 'VIP', type: 'danger' }} colorful icon={editLevel1} size="large" style="position: static" />
        </div>
    </div>
</div>

<script lang="ts">
    import type { Component } from 'svelte';
    import { AIChatDialogue, AIChatInput, chatInputToMessage, type AIChatDialogueAnnotation as Annotation, type AIChatDialogueMessage as Message, type AIChatInputMessageContent as MessageContent, type AIChatInputReference as Reference, type AnnotationItemProps } from '@fibrae/semi-ai-svelte';
    import { IconBookOpenStroked, IconClose, IconFeishuLogo, IconFigma, IconGit, IconSearch, IconTemplateStroked, IconWord } from '@fibrae/semi-icons-svelte';
    import { Button, TypographyParagraph } from '@fibrae/semi-ui-svelte';

    const { Configure } = AIChatInput;

    type SideBarContent = { type?: undefined; value?: undefined } | { type: 'annotation'; value: AnnotationItemProps[] } | { type: 'resource'; value: { name: string } };

    const defaultMessages: Message[] = [
        {
            id: '1',
            role: 'user',
            content: '我想开发一个 Multi Agent 场景下的聊天应用，你能帮我设计一下吗？',
            status: 'completed',
        },
        {
            id: '2',
            role: 'assistant',
            name: 'PM',
            content: [
                {
                    type: 'message',
                    content: [
                        {
                            type: 'input_text',
                            text: '收到。为保证方案可落地，我先明确目标与范围：\n\n- 目标：支持多 Agent 协同回复，用户可选择 Agent 或由系统自动分配\n- MVP 功能：\n  1) 基础对话（文本/图片/文件）\n  2) Agent 身份标识与头像\n  3) 正在输入与流式输出\n  4) 引用来源与工具结果展示\n- 约束：先做单会话，不做云端持久化；优先移动端适配\n\n接下来我会整理 PRD 要点并同步给设计与前端。',
                            annotations: [
                                {
                                    title: 'Semi Design',
                                    url: 'https://semi.design/zh-CN/start/getting-started',
                                    detail: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统。作为一个全面、易用、优质的现代应用UI解决方案，Semi Design从字节跳动各业务线的复杂场景中提炼而来，目前已经支撑了近千个平台产品，服务了内外部超过10万用户',
                                    logo: '/assets/placeholder/logo.svg',
                                },
                                {
                                    title: 'Semi DSM',
                                    url: 'https://semi.design/zh-CN/start/getting-started',
                                    detail: 'Semi DSM 支持全局、组件级别的样式定制，并在 Figma 和线上代码之间保持同步。使用 DSM，将 Semi Design 适配为 Any Design',
                                    logo: '/assets/placeholder/logo.svg',
                                },
                                {
                                    title: 'Semi D2C',
                                    url: 'https://semi.design/zh-CN/start/getting-started',
                                    detail: 'Semi D2C 提供开箱即用的设计稿转代码：支持一键识别 Figma 页面中图层布局 + 设计系统组件，像素级还原设计稿，转译为 React JSX 和 CSS 代码。此外还提供了丰富的扩展能力，基于自定义插件系统快速打造团队专属的设计研发协作工具。',
                                    logo: '/assets/placeholder/logo.svg',
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            id: '3',
            role: 'assistant',
            name: 'PM',
            content: [
                {
                    type: 'message',
                    content: [
                        {
                            type: 'input_text',
                            text: '生成的PRD如下，设计师会先根据此摘要出信息架构与关键页面',
                        },
                        {
                            type: 'resource',
                            name: 'PRD.doc',
                            size: '100KB',
                        },
                    ],
                },
            ],
        },
        {
            id: '4',
            role: 'assistant',
            name: 'UI',
            content: [
                {
                    id: 'rs_02175871288540800000000000000000000ffffac1598778c9aa5',
                    type: 'reasoning',
                    summary: [
                        {
                            type: 'summary_text',
                            text: '\n根据产品经理给的 PRD 绘制关键页面，我需要....',
                        },
                    ],
                    status: 'completed',
                },
                {
                    type: 'function_call',
                    name: 'paint_key_pages',
                    arguments: '{"file":"PRD"}',
                    status: 'completed',
                },
                {
                    type: 'message',
                    content: [
                        {
                            type: 'output_text',
                            text: `设计初稿如下：\n\n- 信息架构：对话页（历史列表 | 消息流 | 工具卡片区）\n- 视觉：左侧展示 Agent 头像与名称标签，色块区分角色\n- 交互：\n  - 输入区支持 @Agent 快速切换与建议提示\n  - 流式输出时展示打字气泡与进度占位\n  - 工具结果以卡片/步骤条形式插入，可展开详情与复制\n\n我先出低保真线框，稍后补高保真与动效说明。`,
                        },
                    ],
                    status: 'completed',
                },
            ],
            status: 'completed',
        },
        {
            id: '5',
            role: 'assistant',
            name: 'FE',
            content: `技术方案建议：\n\n- 技术栈：React + Semi UI，后端采用 WebSocket 或 SSE 支持流式响应\n- 数据模型：消息包含 id、role、name、content、status、references 等字段\n- 组件拆分：AIChatInput + AIChatDialogue；内容采用 Markdown 渲染，支持图片与文件点击\n- 性能：虚拟列表与滚动置底；长文本分块渲染；图片懒加载\n- 可观测性：埋点消息延迟、出错率、工具调用耗时\n\n若确认，我可先搭建页面骨架并接入 mock 数据进行联调。`,
        },
    ];

    const roleConfig = {
        user: {
            name: 'User',
            avatar: '/assets/ai/img/user.png',
        },
        assistant: new Map([
            [
                'PM',
                {
                    name: '产品经理',
                    avatar: '/assets/ai/PM.png',
                },
            ],
            [
                'UI',
                {
                    name: '设计师',
                    avatar: '/assets/ai/UI.png',
                },
            ],
            [
                'FE',
                {
                    name: '前端开发',
                    avatar: '/assets/ai/FE.png',
                },
            ],
        ]),
    };

    const uploadProps = {
        action: 'https://api.semi.design/upload',
    };

    const defaultInput = '我是一名<input-slot placeholder="[职业]">程序员</input-slot>，帮我实现<input-slot placeholder="[需求描述]">Multi Agent 场景下的聊天应用</input-slot>需求';

    const modelOptions = [
        {
            value: 'GPT-5',
            label: 'GPT-5',
            type: 'gpt',
        },
        {
            value: 'GPT-4o',
            label: 'GPT-4o',
            type: 'gpt',
        },
        {
            value: 'Claude 3.5 Sonnet',
            label: 'Claude 3.5 Sonnet',
            type: 'claude',
        },
    ];

    const mcpOptions = [
        {
            label: '飞书文档',
            value: 'feishu',
        },
        {
            label: 'Github Mcp',
            value: 'github',
        },
        {
            label: 'IconFigma Mcp',
            value: 'IconFigma',
        },
    ];

    const mcpIcons: Record<string, Component> = {
        feishu: IconFeishuLogo,
        github: IconGit,
        IconFigma,
    };

    const radioOptions = [
        { label: '快速', value: 'fast' },
        { label: '思考', value: 'think' },
    ];

    const inputOuterStyle = 'margin: 12px; min-height: 150px; max-height: 300px; flex-shrink: 0';
    const editingInputOuterStyle = 'margin: 12px 0px; max-height: 300px; flex-shrink: 0';
    const sideBarTitleStyle = 'font-size: 16px; line-height: 22px; font-weight: 600';
    const resourceButtonStyle = 'display: flex; gap: 8px; width: 100%; background-color: var(--semi-color-fill-0); border: none; padding: 12px 16px; justify-content: center; align-items: center; border-radius: 12px; color: inherit; font: inherit; cursor: pointer';

    let sideBarVisible = $state(false);
    let messages = $state.raw(defaultMessages);
    let generating = $state(false);
    let references = $state.raw<Reference[]>([]);
    let sideBarContent = $state.raw<SideBarContent>({});

    const onReferenceClick = (item: Partial<Reference>) => {
        references = [...references, { ...item, id: `reference-${Date.now()}` }];
    };

    const onReferenceDelete = (item: Reference) => {
        references = references.filter((ref) => ref.id !== item.id);
    };

    const onMessageSend = (content: MessageContent) => {
        generating = true;
        messages = [...messages, { id: `message-${Date.now()}`, ...chatInputToMessage(content) }];
        references = [];
        setTimeout(() => {
            generating = false;
        }, 100);
        setTimeout(() => {
            messages = [
                ...messages,
                {
                    id: `message-${Date.now()}`,
                    role: 'assistant',
                    name: 'FE',
                    content: '这是一条 mock 回复信息',
                },
            ];
        }, 1000);
    };

    const onEditMessageSend = (content: MessageContent) => {
        const index = messages.findIndex((message) => message.editing);
        messages = [...messages.slice(0, index), { id: `message-${Date.now()}`, ...chatInputToMessage(content) }];
    };

    const onEditingReferenceDelete = (item: Reference) => {
        messages = messages.map((message) => (message.editing ? { ...message, references: message.references?.filter((ref) => ref.id !== item.id) } : message));
    };

    const changeSideBarContent = (content: SideBarContent) => {
        sideBarVisible = JSON.stringify(content) === JSON.stringify(sideBarContent) ? !sideBarVisible : true;
        sideBarContent = content;
    };

    const onAnnotationClick = (annotations: Annotation[]) => {
        changeSideBarContent({ type: 'annotation', value: annotations });
    };

    const resourceOf = (item: unknown) => item as { name: string };
</script>

{#snippet configureArea()}
    <Configure.Select field="model" initValue="GPT-4o" optionList={modelOptions} />
    <Configure.Button field="onlineSearch">
        {#snippet icon()}
            <IconBookOpenStroked />
        {/snippet}
        联网搜索
    </Configure.Button>
    <Configure.Mcp options={mcpOptions}>
        {#snippet optionIcon({ item })}
            {@const Icon = mcpIcons[item.value]}
            <Icon />
        {/snippet}
    </Configure.Mcp>
    <Configure.RadioButton field="thinkType" initValue="think" options={radioOptions}>
        {#snippet label({ option })}
            {#if option.value === 'fast'}
                <IconTemplateStroked aria-label={String(option.label)} />
            {:else}
                <IconSearch aria-label={String(option.label)} />
            {/if}
        {/snippet}
    </Configure.RadioButton>
{/snippet}

<div style="display: flex; column-gap: 10px">
    <div style="display: flex; flex-direction: column; height: calc(100vh - 32px); overflow: hidden; flex-grow: 1">
        <AIChatDialogue align="leftRight" bind:chats={messages} mode="bubble" {onAnnotationClick} {onReferenceClick} {roleConfig} showReference style="flex: 1; overflow: auto">
            {#snippet messageEdit(content)}
                <AIChatInput
                    {configureArea}
                    defaultContent={content.inputContents?.[0].text}
                    generating={false}
                    onMessageSend={onEditMessageSend}
                    onReferenceDelete={onEditingReferenceDelete}
                    references={content.references}
                    style={editingInputOuterStyle}
                    uploadProps={{ ...uploadProps, defaultFileList: content.attachments }}
                />
            {/snippet}
            {#snippet contentItem({ item, type, defaultItem })}
                {#if type === 'resource'}
                    <button style={resourceButtonStyle} type="button" onclick={() => changeSideBarContent({ type: 'resource', value: resourceOf(item) })}>
                        <IconWord style="color: var(--semi-color-primary)" />
                        {resourceOf(item).name}
                    </button>
                {:else}
                    {@render defaultItem()}
                {/if}
            {/snippet}
        </AIChatDialogue>
        <AIChatInput {configureArea} defaultContent={defaultInput} {generating} {onMessageSend} {onReferenceDelete} onStopGenerate={() => (generating = false)} placeholder="输入内容或者上传内容" {references} style={inputOuterStyle} {uploadProps} />
    </div>
    {#if sideBarVisible}
        <div style="width: 300px; height: calc(100vh - 32px); border-radius: 12px; border: 1px solid var(--semi-color-border); flex-shrink: 0">
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; color: var(--semi-color-text)">
                {#if sideBarContent.type === 'annotation'}
                    <div style={sideBarTitleStyle}>参考资料</div>
                {/if}
                {#if sideBarContent.type === 'resource'}
                    <div style={sideBarTitleStyle}>产物列表</div>
                {/if}
                <Button aria-label="关闭" style="padding: 0px; width: 24px; height: 24px" theme="borderless" type="tertiary" onclick={() => (sideBarVisible = !sideBarVisible)}>
                    {#snippet icon()}
                        <IconClose />
                    {/snippet}
                </Button>
            </div>
            {#if sideBarContent.type === 'annotation'}
                <div style="display: flex; flex-direction: column; row-gap: 12px; padding: 12px">
                    {#each sideBarContent.value as item, index (index)}
                        <div style="display: flex; flex-direction: column; row-gap: 8px">
                            <span style="display: flex; align-items: center; column-gap: 4px">
                                <img alt="" src={item.logo} style="width: 20px; height: 20px; border-radius: 50%" />
                                <span style="font-size: 14px; line-height: 20px; font-weight: 600; color: var(--semi-color-text-0)">
                                    {item.title}
                                </span>
                            </span>
                            <TypographyParagraph ellipsis={{ rows: 3 }} style="font-size: 12px; line-height: 16px; color: var(--semi-color-text-1)">
                                {item.detail}
                            </TypographyParagraph>
                        </div>
                    {/each}
                </div>
            {:else if sideBarContent.type === 'resource'}
                <div style="display: flex; flex-direction: column; row-gap: 12px; padding: 12px">
                    <div style="display: flex; gap: 12px; align-items: center">
                        <IconWord size="extra-large" style="color: var(--semi-color-primary)" />
                        {sideBarContent.value.name}
                    </div>
                </div>
            {/if}
        </div>
    {/if}
</div>