聊天输入框

<script lang="ts">
    import { AIChatInput, type AIChatInputContent as Content } from '@fibrae/semi-ai-svelte';
    import type { UploadOnChangeProps as OnChangeProps } from '@fibrae/semi-ui-svelte';

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

    const onContentChange = (content: Content[]) => {
        console.log('onContentChange', content);
    };

    const onUploadChange = (fileList: OnChangeProps) => {
        console.log('onUploadChange', fileList);
    };
</script>

<AIChatInput {onContentChange} {onUploadChange} placeholder="输入内容或者上传内容..." style="margin: 12px" {uploadProps} />

<script lang="ts">
    import { AIChatInput, type AIChatInputContent as Content, type AIChatInputReference as Reference, type AIChatInputUploadProps } from '@fibrae/semi-ai-svelte';
    import type { UploadOnChangeProps } from '@fibrae/semi-ui-svelte';

    const uploadProps: AIChatInputUploadProps = {
        action: 'https://api.semi.design/upload',
        defaultFileList: [
            {
                uid: '1',
                name: 'dy.jpeg',
                status: 'success',
                size: '130kb',
                url: '/assets/placeholder/avatar-a.svg',
            },
            {
                uid: '5',
                name: 'resso.jpeg',
                status: 'uploading',
                percent: 50,
                size: '222kb',
                url: '/assets/placeholder/avatar-b.svg',
            },
        ],
    };

    let references = $state<Reference[]>([
        {
            id: '1',
            type: 'text',
            content: '测试文本，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字,这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字',
        },
    ]);
    let generating = $state(false);

    const onContentChange = (content: Content[]) => {
        console.log('onContentChange', content);
    };

    const onUploadChange = (fileList: UploadOnChangeProps) => {
        console.log('onUploadChange', fileList);
    };

    const toggleGenerate = () => {
        generating = !generating;
    };

    const onMessageSend = () => {
        toggleGenerate();
        references = [];
    };

    const handleReferenceDelete = (item: Reference) => {
        references = references.filter((ref) => ref.id !== item.id);
    };
</script>

<AIChatInput defaultContent="点击发送按钮，观察上传内容、引用内容、输入框内容变化" {generating} {onContentChange} {onMessageSend} onReferenceDelete={handleReferenceDelete} onStopGenerate={toggleGenerate} {onUploadChange} {references} style="margin: 12px" {uploadProps} />

<script lang="ts">
    import { AIChatInput } from '@fibrae/semi-ai-svelte';

    const uploadProps = { action: 'https://api.semi.design/upload' };
    const temp = {
        'input-slot': '我是一个<input-slot placeholder="[职业]">程序员</input-slot>',
        'select-slot': `我是<select-slot value="前端开发" options='["设计","前端开发","后端开发"]'></select-slot>，帮我完成...`,
        'skill-slot': `<skill-slot data-label="AI Coding" data-value="AI Coding" data-template=false></skill-slot> 帮我完成...`,
    };
    const names = Object.keys(temp);
    const contents = Object.values(temp);

    let activeIndex = $state(0);
    let input = $state<ReturnType<typeof AIChatInput>>();

    const setTemplate = (index: number) => {
        activeIndex = index;
        input?.setContent(contents[index]);
        input?.focusEditor();
    };
</script>

<div class="aiChatInput-radio" role="tablist">
    {#each names as item, index (item)}
        <div
            aria-selected={index === activeIndex}
            class={['aiChatInput-radio-item', { 'aiChatInput-radio-item-selected': index === activeIndex }]}
            role="tab"
            tabindex="0"
            onclick={() => setTemplate(index)}
            onkeydown={(event) => {
                if (event.key === 'Enter') {
                    setTemplate(index);
                }
            }}
        >
            {item}
        </div>
    {/each}
</div>
<AIChatInput bind:this={input} defaultContent={temp['input-slot']} placeholder="输入内容或者上传内容" style="margin: 12px" {uploadProps} />

<script lang="ts">
    import { AIChatInput, type AIChatInputReference as Reference } from '@fibrae/semi-ai-svelte';

    const uploadProps = { action: 'https://api.semi.design/upload' };
    let references = $state<Reference[]>([
        {
            id: '1',
            type: 'text',
            content: '测试文本，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字,这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字',
        },
        {
            id: '2',
            name: '飞书文档.docx',
        },
        {
            id: '3',
            name: '飞书文档.pdf',
        },
        {
            id: '4',
            name: 'Music.mp4',
        },
        {
            id: '5',
            name: 'Image.jpeg',
            url: '/assets/placeholder/avatar-b.svg',
        },
        {
            id: '6',
            name: 'code.json',
        },
    ]);

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

    const handleReferenceClick = (item: Reference) => {
        console.log('点击了引用', item);
    };
</script>

<AIChatInput onReferenceClick={handleReferenceClick} onReferenceDelete={handleReferenceDelete} placeholder="用于查看引用内容的用例" {references} style="margin: 12px" {uploadProps} />

<script lang="ts">
    import type { Component } from 'svelte';
    import { AIChatInput, type AIChatInputLeftMenuChangeProps as LeftMenuChangeProps } from '@fibrae/semi-ai-svelte';
    import { IconBookOpenStroked, IconFeishuLogo, IconFigma, IconGit } from '@fibrae/semi-icons-svelte';

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

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

    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 radioButtonProps = [
        { label: '极速', value: 'fast' },
        { label: '思考', value: 'think' },
        { label: '超能', value: 'super' },
    ];

    const onConfigureButtonClick = () => {
        console.log('onConfigureButtonClick');
    };

    const onConfigureChange = (value: LeftMenuChangeProps, changedValue?: LeftMenuChangeProps) => {
        console.log('onConfigureChange', value, changedValue);
    };
</script>

<AIChatInput {onConfigureChange} placeholder="用于查看左下方配置项的用例" style="margin: 12px" {uploadProps}>
    {#snippet configureArea()}
        <Configure.Select field="model" initValue="GPT-4o" optionList={modelOptions} />
        <Configure.Button field="onlineSearch">
            {#snippet icon()}
                <IconBookOpenStroked />
            {/snippet}
            联网搜索
        </Configure.Button>
        <Configure.Mcp {onConfigureButtonClick} options={mcpOptions} showConfigure>
            {#snippet optionIcon({ item })}
                {@const Icon = mcpIcons[item.value]}
                <Icon />
            {/snippet}
        </Configure.Mcp>
        <Configure.RadioButton field="thinkType" initValue="fast" options={radioButtonProps} />
    {/snippet}
</AIChatInput>

<script lang="ts">
    import { AIChatInput, type AIChatInputLeftMenuChangeProps as LeftMenuChangeProps } from '@fibrae/semi-ai-svelte';
    import { Cascader } from '@fibrae/semi-ui-svelte';

    const uploadProps = { action: 'https://api.semi.design/upload' };
    const cascaderModalOptions = [
        {
            label: 'GPT',
            value: 'GPT',
            children: [
                { label: 'GPT-4o', value: 'GPT-4o' },
                { value: 'GPT-5', label: 'GPT-5' },
            ],
        },
        {
            label: 'Claude',
            value: 'Claude',
            children: [{ label: 'Claude 3.5 Sonnet', value: 'Claude 3.5 Sonnet' }],
        },
    ];

    const onConfigureChange = (value: LeftMenuChangeProps, changedValue?: LeftMenuChangeProps) => {
        console.log('onConfigureChange', value, changedValue);
    };
</script>

<AIChatInput {onConfigureChange} placeholder="用于查看左下方配置项的用例" style="margin: 12px" {uploadProps}>
    {#snippet configureArea()}
        <AIChatInput.Configure.Item baseClass="aiChatInput-cascader-configure" component={Cascader} field="model" initValue={['GPT', 'GPT-4o']} treeData={cascaderModalOptions} />
    {/snippet}
</AIChatInput>

<script lang="ts">
    import { AIChatInput } from '@fibrae/semi-ai-svelte';
    import { IconDeleteStroked } from '@fibrae/semi-icons-svelte';
    import { Button, Divider } from '@fibrae/semi-ui-svelte';

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

<AIChatInput placeholder="输入内容或者上传内容..." style="margin: 12px" {uploadProps}>
    {#snippet actionArea({ upload, send, class: actionClass })}
        <div class={actionClass}>
            <div style="display: flex; align-items: center">
                <Button aria-label="清空内容" style="border-radius: 50%" type="tertiary">
                    {#snippet icon()}
                        <IconDeleteStroked />
                    {/snippet}
                </Button>
                <Divider layout="vertical" style="margin-left: 8px" />
            </div>
            {@render upload()}
            {@render send()}
        </div>
    {/snippet}
</AIChatInput>

<script lang="ts">
    import { AIChatInput } from '@fibrae/semi-ai-svelte';
    import { IconUpload } from '@fibrae/semi-icons-svelte';

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

    // Upload opens the dialog on a click that reaches it; stopping the click here opens it once, from the callback
    const open = (event: MouseEvent, onOpenFileDialog: () => void) => {
        event.stopPropagation();
        onOpenFileDialog();
    };
</script>

<AIChatInput placeholder="自定义上传按钮（仍支持粘贴上传）" style="margin: 12px" {uploadProps}>
    {#snippet uploadButton({ onOpenFileDialog, disabled })}
        <button aria-label="上传" class="semi-button semi-button-borderless" {disabled} type="button" onclick={(event) => open(event, onOpenFileDialog)}>
            <IconUpload />
        </button>
    {/snippet}
</AIChatInput>

<script lang="ts">
    import type { Component } from 'svelte';
    import { AIChatInput } from '@fibrae/semi-ai-svelte';
    import { IconBookOpenStroked, IconFeishuLogo, IconFigma, IconGit } from '@fibrae/semi-icons-svelte';
    import { Radio, RadioGroup, type RadioValue } from '@fibrae/semi-ui-svelte';

    const { Configure } = AIChatInput;
    const uploadProps = { action: 'https://api.semi.design/upload' };
    const modelOptions = [
        { value: 'GPT-5', label: 'GPT-5' },
        { value: 'GPT-4o', label: 'GPT-4o' },
        { value: 'Claude 3.5 Sonnet', label: 'Claude 3.5 Sonnet' },
    ];

    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 radioButtonProps = [
        { label: '极速', value: 'fast' },
        { label: '思考', value: 'think' },
        { label: '超能', value: 'super' },
    ];

    let shape = $state<RadioValue | undefined>('square');
</script>

<RadioGroup aria-label="单选组合示例" bind:value={shape} name="demo-radio-group">
    <Radio value="round">圆形</Radio>
    <Radio value="square">方形</Radio>
</RadioGroup>
<AIChatInput placeholder="下方按钮为方形的用例" round={shape === 'round'} style="margin: 12px" {uploadProps}>
    {#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="mode" initValue="fast" options={radioButtonProps} />
    {/snippet}
</AIChatInput>

<script lang="ts">
    import { AIChatInput, type AIChatInputContent as Content } from '@fibrae/semi-ai-svelte';

    const uploadProps = { action: 'https://api.semi.design/upload' };
    const suggestionTemplate = ['天气如何', '空气质量', '工作进程', '日程安排'];

    let suggestions = $state<string[]>([]);

    const onChange = (content: Content[]) => {
        const value: string | undefined = content.length && content[0].text ? content[0].text : undefined;
        if (value === undefined || value.includes('\n') || value.length >= 4) {
            if (suggestions.length) {
                suggestions = [];
            }
            return;
        }
        suggestions = value.length ? suggestionTemplate.map((item) => `${value}，${item}`) : [];
    };
</script>

<AIChatInput onContentChange={onChange} placeholder="输入内容，当内容长度小于 4个字符可以看到建议，使用上下按键可切换侯选项" style="margin: 12px" {suggestions} {uploadProps} />

<script lang="ts">
    import type { Component } from 'svelte';
    import { AIChatInput } from '@fibrae/semi-ai-svelte';
    import { IconSearch, IconTemplateStroked } from '@fibrae/semi-icons-svelte';

    const { Configure } = AIChatInput;
    const modelOptions = [
        { value: 'GPT-5', label: 'GPT-5' },
        { value: 'GPT-4o', label: 'GPT-4o' },
        { value: 'Claude 3.5 Sonnet', label: 'Claude 3.5 Sonnet' },
    ];
    const uploadProps = { action: 'https://api.semi.design/upload' };
    const skills = [
        {
            value: 'writing',
            label: '帮我写作',
            hasTemplate: true,
        },
        {
            value: 'AI 编程',
            label: 'AI coding',
        },
    ];
    const skillIcons: Record<string, Component> = { writing: IconTemplateStroked, 'AI 编程': IconSearch };

    const templates = [
        {
            group: '工作',
            children: [
                {
                    bg: 'var(--semi-color-primary)',
                    title: '总结汇报',
                    desc: '凝练你的工作成效',
                    content: `我的职业是<input-slot placeholder="[请输入职业]"></input-slot>，帮我写一份关于<input-slot placeholder="[输入目的：项目进展总结、团队工作成果或其他]"></input-slot>的总结汇报`,
                },
                {
                    bg: 'var(--semi-color-warning)',
                    title: '话术',
                    desc: '满足不同场景表达需求',
                    content: `我是一名<select-slot value="打工人" options='["打工人","学生"]'></select-slot> ，帮我写一段面向<input-slot placeholder="[输入对象]">陌生同事</input-slot>的话术内容`,
                },
            ],
        },
        {
            group: '商业营销',
            children: [
                {
                    bg: 'var(--semi-color-primary)',
                    title: '宣传文案',
                    desc: '撰写各平台的推广文案',
                    content: '帮我写一篇面向<input-slot placeholder="[输入目标人群]"></input-slot>职场人士，关于<input-slot placeholder="[输入产品]"></input-slot>的宣传文案，需要直击痛点，吸引用户点击。',
                },
                {
                    bg: 'var(--semi-color-warning)',
                    title: '方案策划',
                    desc: '量身定制各种方案',
                    content: '我是一名<input-slot placeholder="[输入职业]"></input-slot>职业策划人 ，帮我写一个<input-slot placeholder="[方案类型：如线下读书会活动方案等]"></input-slot>线下读书会活动 的方案，需要包含但不限于策划目标、详细计划、所需资源和预算、效果评估、风险应对等。',
                },
            ],
        },
    ];

    let groupIndex = $state(0);
    let input = $state<ReturnType<typeof AIChatInput>>();

    const setTemplate = (content: string) => {
        input?.setContentWhileSaveTool(content);
        input?.focusEditor();
    };
</script>

<AIChatInput bind:this={input} placeholder="输入 / 唤起技能，选择技能后，点击模版按钮可查看模版，可通过鼠标上下按键切换侯选项" skillHotKey="/" {skills} style="margin: 12px" {uploadProps}>
    {#snippet configureArea()}
        <Configure.Select field="model" initValue="GPT-4o" optionList={modelOptions} />
    {/snippet}
    {#snippet skillIcon({ item })}
        {@const Icon = skillIcons[item.value ?? '']}
        <Icon />
    {/snippet}
    {#snippet template({ skill })}
        {#if skill?.value === 'writing'}
            <div class="aiChatInput-template">
                <div class="template-header">
                    {#each templates as item, index (item.group)}
                        <button class={['template-header-item', { 'template-header-item-active': groupIndex === index }]} style="border: none; font-family: inherit" type="button" onclick={() => (groupIndex = index)}>
                            {item.group}
                        </button>
                    {/each}
                </div>
                <div class="template-content">
                    {#each templates[groupIndex].children as item (item.title)}
                        <button class="template-content-item" style="font: inherit; text-align: left" type="button" onclick={() => setTemplate(item.content)}>
                            <span class="template-content-item-icon" style="background: {item.bg}">
                                <IconTemplateStroked />
                            </span>
                            <span class="template-content-item-title">{item.title}</span>
                            <span class="template-content-item-desc">{item.desc}</span>
                        </button>
                    {/each}
                </div>
            </div>
        {/if}
    {/snippet}
</AIChatInput>

<script lang="ts">
    import type { Component } from 'svelte';
    import { AIChatInput, type AIChatInputAttachment as Attachment, type AIChatInputReference as Reference } from '@fibrae/semi-ai-svelte';
    import { IconBranch, IconClose, IconCode, IconConnectionPoint2, IconFile, IconFolder, IconGit, IconGlobeStroke, IconSearch, IconTemplateStroked, IconTerminal, IconUpload } from '@fibrae/semi-icons-svelte';

    const { Configure } = AIChatInput;
    const radioButtonProps = [
        { label: '快速', value: 'fast' },
        { label: '深度思考', value: 'think' },
    ];
    const modeIcons: Record<string, Component> = { fast: IconTemplateStroked, think: IconSearch };
    const uploadProps = { action: 'https://api.semi.design/upload' };

    let references = $state<Reference[]>([
        {
            type: 'file',
            id: '1',
            name: 'horizontalScroller.tsx',
            path: 'packages/semi-ui-react/AIChatInput/horizontalScroller.tsx',
        },
        {
            type: 'folder',
            id: '2',
            name: 'AIChatInput',
            path: 'packages/semi-ui-react/AIChatInput',
        },
        {
            type: 'web',
            id: '3',
            name: 'web',
        },
        {
            type: 'change',
            id: '4',
            name: 'recentChange',
        },
        {
            type: 'branch',
            id: '5',
            name: 'Branch',
            detail: 'Diff with Main Branch',
            branch: 'feat/aichatinput',
            targetBranch: 'feat/targetBranch',
        },
        {
            type: 'terminal',
            id: '6',
            name: 'From 1-2',
            from: 1,
            to: 2,
        },
    ]);

    const isImageType = ({ name = '', fileInstance }: Attachment) => {
        const PIC_PREFIX = 'image/';
        const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
        const suffix = name.split('.').pop() ?? '';
        let result = false;
        const type = fileInstance?.type ?? '';
        if (type.startsWith(PIC_PREFIX)) {
            result = true;
        } else if (PIC_SUFFIX_ARRAY.includes(suffix)) {
            result = true;
        }
        return result;
    };

    const refTypeToIconMap: Record<string, Component> = {
        file: IconFile,
        folder: IconFolder,
        branch: IconBranch,
        terminal: IconTerminal,
        web: IconGlobeStroke,
        change: IconConnectionPoint2,
        git: IconGit,
        code: IconCode,
    };

    const onReferenceDelete = (reference: Reference) => {
        references = references.filter((item) => item.id !== reference.id);
    };
</script>

<AIChatInput class="aiChatInput-customTopSlot" {onReferenceDelete} placeholder="自定义渲染顶部内容，可用于渲染上传内容、引用内容" {references} showReference={false} showUploadFile={false} style="margin: 12px" {uploadProps}>
    {#snippet topSlot({ attachments, references: items, onReferenceDelete: deleteReference, onUploadFileDelete })}
        <div class="ai-chat-input-topSlot">
            {#each items as item (item.id)}
                {@const Icon = refTypeToIconMap[item.type ?? '']}
                <div class="item">
                    <span class="item-icon">
                        {#if Icon}
                            <Icon class="item-left item-icon" size="small" />
                        {/if}
                        <button aria-label="删除" class="item-icon-delete" type="button" onclick={() => deleteReference(item)}>
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">
                        {item.name}
                        {#if item.type === 'branch'}
                            <span class="detail">{item.detail}</span>
                        {/if}
                    </span>
                </div>
            {/each}
            {#each attachments as item (item.uid)}
                <div class="item">
                    <span class="item-icon">
                        {#if isImageType(item)}
                            <img alt={item.name} class="item-image item-left" src={item.url} />
                        {:else}
                            <IconUpload class="item-left item-icon" size="small" />
                        {/if}
                        <button aria-label="删除" class="item-icon-delete" type="button" onclick={() => onUploadFileDelete(item)}>
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">{item.name}</span>
                </div>
            {/each}
        </div>
    {/snippet}
    {#snippet configureArea()}
        <Configure.RadioButton field="mode" initValue="fast" options={radioButtonProps}>
            <!-- the icon is the only label, so it carries the name -->
            {#snippet label({ option })}
                {@const Icon = modeIcons[String(option.value)]}
                <Icon aria-label={option.label} />
            {/snippet}
        </Configure.RadioButton>
    {/snippet}
</AIChatInput>

<script lang="ts">
    import type { Component } from 'svelte';
    import { computePosition, shift } from '@floating-ui/dom';
    import { Node, mergeAttributes, posToDOMRect } from '@tiptap/core';
    import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention';
    import { AIChatInput, type AIChatInputAttachment as Attachment, type AIChatInputContent as Content, type AIChatInputReference as Reference } from '@fibrae/semi-ai-svelte';
    import { IconBranch, IconChevronRight, IconClose, IconCode, IconConnectionPoint2, IconFile, IconFolder, IconGit, IconGlobeStroke, IconTerminal, IconUpload } from '@fibrae/semi-icons-svelte';

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

    interface PanelItem {
        icon: Component;
        key: string;
        type: string;
        name: string;
        path?: string;
    }

    const TestAction: Record<string, PanelItem[]> = {
        'Files & Folders': [
            {
                icon: IconFile,
                key: '1-1',
                type: 'file',
                name: 'TagInput.scss',
                path: 'package/semi-founctaion/TagInput.scss',
            },
            {
                icon: IconFolder,
                key: '1-2',
                type: 'folder',
                name: 'package',
                path: '/package',
            },
            {
                icon: IconFolder,
                key: '1-3',
                type: 'folder',
                name: 'semi-ui',
                path: '/package/semi-ui',
            },
        ],
        Git: [
            {
                icon: IconBranch,
                key: '2-1',
                type: 'branch',
                name: 'fix/tag',
            },
            {
                icon: IconCode,
                key: '2-2',
                type: 'code',
                name: 'v2.86.0',
                path: '/package',
            },
            {
                icon: IconGit,
                key: '2-3',
                type: 'git',
                name: 'chore: publish',
            },
        ],
    };

    const FirstLevel = Object.keys(TestAction);

    // A ProseMirror node view that renders plain DOM: tiptap has no Svelte binding, and the value is the only state
    const ReferSlot = Node.create({
        name: 'referSlot',
        inline: true,
        group: 'inline',
        atom: true,
        selectable: false,
        addAttributes() {
            return {
                value: {
                    default: '输入内容',
                    parseHTML: (element) => element.getAttribute('data-value'),
                    renderHTML: (attributes) => ({
                        'data-value': attributes.value,
                    }),
                },
                info: {
                    default: '',
                    parseHTML: (element) => element.getAttribute('data-info'),
                    renderHTML: (attributes) => ({
                        'data-info': attributes.info,
                    }),
                },
                type: {
                    default: 'text',
                    parseHTML: (element) => element.getAttribute('data-type'),
                    renderHTML: (attributes) => ({
                        'data-type': attributes.type,
                    }),
                },
                uniqueKey: {
                    default: '',
                    parseHTML: (element) => element.getAttribute('data-unique-key'),
                    renderHTML: (attributes) => ({
                        'data-unique-key': attributes.uniqueKey,
                    }),
                },
                // Sizes the caret around the custom node; every custom node needs it
                isCustomSlot: AIChatInput.getCustomSlotAttribute(),
            };
        },
        parseHTML() {
            return [
                {
                    tag: 'refer-slot',
                },
            ];
        },
        renderHTML({ HTMLAttributes }) {
            return ['refer-slot', mergeAttributes(HTMLAttributes)];
        },
        addNodeView() {
            return ({ node }) => {
                const dom = document.createElement('span');
                dom.className = 'ai-chat-input-refer-slot-wrapper';
                const slot = document.createElement('span');
                slot.className = 'ai-chat-input-refer-slot';
                slot.textContent = node.attrs.value ? node.attrs.value : '';
                dom.append(slot);
                return {
                    dom,
                    update: (updated) => {
                        if (updated.type !== node.type) {
                            return false;
                        }
                        slot.textContent = updated.attrs.value ? updated.attrs.value : '';
                        return true;
                    },
                };
            };
        },
    });

    interface ReferSlotAttrs {
        value: string;
        info: string;
        type?: string;
        uniqueKey: string;
    }

    type MentionSuggestion = MentionOptions['suggestion'];
    type MentionStartProps = Parameters<NonNullable<ReturnType<NonNullable<MentionSuggestion['render']>>['onStart']>>[0];

    // Content the panel returns through command, not limited to Mention's own attributes
    interface MentionCommandProps extends Partial<MentionNodeAttrs> {
        item?: PanelItem;
        allowHotKeySend?: boolean;
    }

    type MentionPanelProps = Omit<MentionStartProps, 'command'> & {
        command: (props: MentionCommandProps) => void;
    };

    // Suggestion panel state; null means closed
    let panel = $state.raw<MentionPanelProps | null>(null);
    let level = $state(1);
    let options = $state.raw<(string | PanelItem)[]>(FirstLevel);
    let selectedIndex = $state(0);
    let floating = $state<HTMLElement>();
    let floatingStyle = $state('position: absolute; width: max-content; left: 0px; top: 0px');

    const filterOptions = $derived.by(() => {
        const query = panel?.query;
        return query
            ? options.filter((item) => {
                  const name = typeof item === 'string' ? item : item.name;
                  return name.toLowerCase().includes(query.toLowerCase());
              })
            : options;
    });

    // a new list or query starts again from the first match
    $effect(() => {
        void options;
        void panel?.query;
        selectedIndex = 0;
    });

    // The panel follows the caret; option changes resize it, so reposition
    $effect(() => {
        void filterOptions;
        const current = panel;
        if (!current?.clientRect || !floating) {
            return;
        }
        const virtualElement = {
            getBoundingClientRect: () => posToDOMRect(current.editor.view, current.editor.state.selection.from, current.editor.state.selection.to),
        };
        void computePosition(virtualElement, floating, {
            placement: 'bottom-start',
            strategy: 'absolute',
            middleware: [shift()],
        }).then(({ x, y, strategy }) => {
            floatingStyle = `position: ${strategy}; width: max-content; left: ${x}px; top: ${y}px`;
        });
    });

    // Mounted in the body so no ancestor's overflow clips the panel
    const portal = (element: HTMLElement) => {
        document.body.append(element);
        return () => element.remove();
    };

    const setHotKeySend = (allow: boolean) => {
        // While the panel is open, Enter belongs to it, not to AIChatInput's send
        panel?.command({ allowHotKeySend: allow });
    };

    const closePanel = () => {
        setHotKeySend(true);
        panel = null;
    };

    const selectItem = (item: string | PanelItem) => {
        if (typeof item === 'string') {
            level = 2;
            options = TestAction[item];
        } else {
            panel?.command({ item });
        }
    };

    const onItemClick = (item: string | PanelItem) => {
        selectItem(item);
        // Clicking an option blurs the editor, so return focus after entering the second level
        if (level === 1) {
            panel?.editor.commands.focus();
        }
    };

    const suggestion: MentionSuggestion = {
        items: () => FirstLevel,
        command: ({ editor, range, props }) => {
            const { item, allowHotKeySend } = props as MentionCommandProps;
            if (typeof allowHotKeySend === 'boolean') {
                // AIChatInput registers its state under the extension name, which tiptap's Storage type does not know
                (editor.storage as Record<string, { allowHotKeySend: boolean }>).SemiAIChatInput.allowHotKeySend = allowHotKeySend;
            }
            if (item) {
                editor
                    .chain()
                    .focus()
                    .insertContentAt(range, {
                        type: 'referSlot',
                        attrs: {
                            type: item.type,
                            value: item.name || '',
                            info: JSON.stringify({ path: item.path }),
                            uniqueKey: item.key,
                        },
                    })
                    .run();
            }
        },
        render: () => ({
            onStart: (props) => {
                level = 1;
                options = FirstLevel;
                panel = props as MentionPanelProps;
                setHotKeySend(false);
            },
            onUpdate: (props) => {
                // After Escape closes the panel it stays closed until this suggestion ends
                if (panel) {
                    panel = props as MentionPanelProps;
                }
            },
            onKeyDown: ({ event }) => {
                if (!panel) {
                    return false;
                }
                if (event.key === 'ArrowUp') {
                    selectedIndex = (selectedIndex + filterOptions.length - 1) % filterOptions.length;
                    return true;
                }
                if (event.key === 'ArrowDown') {
                    selectedIndex = (selectedIndex + 1) % filterOptions.length;
                    return true;
                }
                if (event.key === 'Enter') {
                    const item = filterOptions[selectedIndex];
                    if (item) {
                        selectItem(item);
                    }
                    return true;
                }
                if (event.key === 'Escape') {
                    if (level === 1) {
                        closePanel();
                    } else {
                        level = 1;
                        options = FirstLevel;
                    }
                    return true;
                }
                return false;
            },
            onExit: closePanel,
        }),
    };

    const extensions = [
        ReferSlot,
        Mention.configure({
            HTMLAttributes: {
                class: 'mention',
            },
            suggestion,
        }),
    ];

    let references = $state<Reference[]>([
        {
            type: 'file',
            id: '1',
            name: 'horizontalScroller.tsx',
            path: 'packages/semi-ui-react/AIChatInput/horizontalScroller.tsx',
        },
        {
            type: 'folder',
            id: '2',
            name: 'AIChatInput',
            path: 'packages/semi-ui-react/AIChatInput',
        },
        {
            type: 'web',
            id: '3',
            name: 'web',
        },
        {
            type: 'change',
            id: '4',
            name: 'recentChange',
        },
        {
            type: 'branch',
            id: '5',
            name: 'Branch',
            detail: 'Diff with Main Branch',
            branch: 'feat/aichatinput',
            targetBranch: 'feat/targetBranch',
        },
        {
            type: 'terminal',
            id: '6',
            name: 'From 1-2',
            from: 1,
            to: 2,
        },
    ]);

    const isImageType = ({ name = '', fileInstance }: Attachment) => {
        const PIC_PREFIX = 'image/';
        const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
        const suffix = name.split('.').pop() ?? '';
        let result = false;
        const type = fileInstance?.type ?? '';
        if (type.startsWith(PIC_PREFIX)) {
            result = true;
        } else if (PIC_SUFFIX_ARRAY.includes(suffix)) {
            result = true;
        }
        return result;
    };

    const refTypeToIconMap: Record<string, Component> = {
        file: IconFile,
        folder: IconFolder,
        branch: IconBranch,
        terminal: IconTerminal,
        web: IconGlobeStroke,
        change: IconConnectionPoint2,
        git: IconGit,
        code: IconCode,
    };

    let input = $state<ReturnType<typeof AIChatInput>>();

    const richContent = (content: Content[]) => content.filter((item) => item.type !== 'text');

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

    const onContentChange = (content: Content[]) => {
        console.log('onContentChange', content);
    };

    const transformer = new Map([
        [
            'referSlot',
            ({ attrs }: { attrs: ReferSlotAttrs }) => {
                const { value, info, type = 'text', uniqueKey } = attrs;
                return {
                    type: type,
                    value: value,
                    uniqueKey: uniqueKey,
                    ...JSON.parse(info),
                };
            },
        ],
    ]);
</script>

<AIChatInput bind:this={input} class="aiChatInput-customTopSlot" {extensions} {onContentChange} {onReferenceDelete} placeholder="使用 @ 触发" {references} showReference={false} showUploadFile={false} style="margin: 12px" {transformer} {uploadProps}>
    {#snippet topSlot({ attachments, content, references: items, onReferenceDelete: deleteReference, onUploadFileDelete })}
        <div class="ai-chat-input-topSlot">
            {#each richContent(content) as item, index (item.key ?? index)}
                {@const Icon = refTypeToIconMap[item.type]}
                <div class="item">
                    <span class="item-icon">
                        {#if Icon}
                            <Icon class="item-left item-icon" size="small" />
                        {/if}
                        <button aria-label="删除" class="item-icon-delete" type="button" onclick={() => input?.deleteContent(item)}>
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">
                        {item.name ? item.name : item.value}
                        {#if item.type === 'branch'}
                            <span class="detail">{item.detail}</span>
                        {/if}
                    </span>
                </div>
            {/each}
            {#each items as item (item.id)}
                {@const Icon = refTypeToIconMap[item.type ?? '']}
                <div class="item">
                    <span class="item-icon">
                        {#if Icon}
                            <Icon class="item-left item-icon" size="small" />
                        {/if}
                        <button aria-label="删除" class="item-icon-delete" type="button" onclick={() => deleteReference(item)}>
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">
                        {item.name}
                        {#if item.type === 'branch'}
                            <span class="detail">{item.detail}</span>
                        {/if}
                    </span>
                </div>
            {/each}
            {#each attachments as item (item.uid)}
                <div class="item">
                    <span class="item-icon">
                        {#if isImageType(item)}
                            <img alt={item.name} class="item-image item-left" src={item.url} />
                        {:else}
                            <IconUpload class="item-left item-icon" size="small" />
                        {/if}
                        <button aria-label="删除" class="item-icon-delete" type="button" onclick={() => onUploadFileDelete(item)}>
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">{item.name}</span>
                </div>
            {/each}
        </div>
    {/snippet}
</AIChatInput>
{#if panel}
    <div {@attach portal} bind:this={floating} style={floatingStyle}>
        <div class="ai-chat-input-custom-extension-dropdown-menu" role="menu" style="width: {level === 1 ? '200px' : '300px'}">
            {#if filterOptions.length}
                {#each filterOptions as item, index (index)}
                    <div
                        class={['optionItem', { 'is-selected': index === selectedIndex }]}
                        role="menuitem"
                        tabindex="-1"
                        onclick={() => onItemClick(item)}
                        onfocusin={() => (selectedIndex = index)}
                        onkeydown={(event) => {
                            if (event.key === 'Enter') {
                                onItemClick(item);
                            }
                        }}
                        onmouseenter={() => (selectedIndex = index)}
                    >
                        {#if typeof item === 'string'}
                            <span>{item}</span>
                        {:else}
                            <div class="level2Item">
                                <item.icon />
                                <span class="name">{item.name}</span>
                                <span class="path">{item.path}</span>
                            </div>
                        {/if}
                        {#if level === 1}
                            <IconChevronRight class="option-item-arrow" />
                        {/if}
                    </div>
                {/each}
            {:else}
                <div class="item">No result</div>
            {/if}
        </div>
    </div>
{/if}