AIChatInput

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

    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>

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

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

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

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

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

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

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

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

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

<template>
    <AIChatInput
        defaultContent="点击发送按钮，观察上传内容、引用内容、输入框内容变化"
        :generating="generating"
        :references="references"
        style="margin: 12px"
        :uploadProps="uploadProps"
        @contentChange="onContentChange"
        @messageSend="onMessageSend"
        @referenceDelete="handleReferenceDelete"
        @stopGenerate="toggleGenerate"
        @uploadChange="onUploadChange"
    />
</template>

<script setup lang="ts">
    import { ref, useTemplateRef } from 'vue';
    import { AIChatInput, type AIChatInputHandle } from '@fibrous/semi-ai-vue';

    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);

    const activeIndex = ref(0);
    const input = useTemplateRef<AIChatInputHandle>('input');

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

<template>
    <div class="aiChatInput-radio" role="tablist">
        <div v-for="(item, index) in names" :key="item" :aria-selected="index === activeIndex" :class="['aiChatInput-radio-item', { 'aiChatInput-radio-item-selected': index === activeIndex }]" role="tab" tabindex="0" @click="setTemplate(index)" @keydown.enter="setTemplate(index)">
            {{ item }}
        </div>
    </div>
    <AIChatInput ref="input" :defaultContent="temp['input-slot']" placeholder="输入内容或者上传内容" style="margin: 12px" :uploadProps="uploadProps" />
</template>

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

    const uploadProps = { action: 'https://api.semi.design/upload' };
    const references = ref<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.value = references.value.filter((ref) => ref.id !== item.id);
    };

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

<template>
    <AIChatInput placeholder="用于查看引用内容的用例" :references="references" style="margin: 12px" :uploadProps="uploadProps" @referenceClick="handleReferenceClick" @referenceDelete="handleReferenceDelete" />
</template>

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

    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>

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

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

    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 CustomCascader = getConfigureItem(Cascader, {
        className: 'aiChatInput-cascader-configure',
    });

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

<template>
    <AIChatInput placeholder="用于查看左下方配置项的用例" style="margin: 12px" :uploadProps="uploadProps" @configureChange="onConfigureChange">
        <template #configureArea>
            <CustomCascader field="model" :initValue="['GPT', 'GPT-4o']" :treeData="cascaderModalOptions" />
        </template>
    </AIChatInput>
</template>

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

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

<template>
    <AIChatInput placeholder="输入内容或者上传内容..." style="margin: 12px" :uploadProps="uploadProps">
        <template #actionArea="{ menuItem, class: actionClass }">
            <div :class="actionClass">
                <div style="display: flex; align-items: center">
                    <Button aria-label="清空内容" style="border-radius: 50%" type="tertiary">
                        <template #icon>
                            <IconDeleteStroked />
                        </template>
                    </Button>
                    <Divider layout="vertical" style="margin-left: 8px" />
                </div>
                <component :is="node" v-for="(node, index) in menuItem" :key="index" />
            </div>
        </template>
    </AIChatInput>
</template>

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

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

<template>
    <AIChatInput placeholder="自定义上传按钮（仍支持粘贴上传）" style="margin: 12px" :uploadProps="uploadProps">
        <template #uploadButton="{ onOpenFileDialog, disabled }">
            <button aria-label="上传" class="semi-button semi-button-borderless" :disabled="disabled" type="button" @click.stop="onOpenFileDialog">
                <IconUpload />
            </button>
        </template>
    </AIChatInput>
</template>

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

    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 = { feishu: IconFeishuLogo, github: IconGit, IconFigma };

    const radioButtonProps = [
        { label: '极速', value: 'fast' },
        { label: '思考', value: 'think' },
        { label: '超能', value: 'super' },
    ];

    const shape = ref<RadioValue | undefined>('square');
</script>

<template>
    <RadioGroup v-model="shape" aria-label="单选组合示例" name="demo-radio-group">
        <Radio value="round">圆形</Radio>
        <Radio value="square">方形</Radio>
    </RadioGroup>
    <AIChatInput placeholder="下方按钮为方形的用例" :round="shape === 'round'" style="margin: 12px" :uploadProps="uploadProps">
        <template #configureArea>
            <Configure.Select field="model" initValue="GPT-4o" :optionList="modelOptions" />
            <Configure.Button field="onlineSearch">
                <template #icon>
                    <IconBookOpenStroked />
                </template>
                联网搜索
            </Configure.Button>
            <Configure.Mcp :options="mcpOptions">
                <template #optionIcon="{ item }">
                    <component :is="mcpIcons[item.value as keyof typeof mcpIcons]" />
                </template>
            </Configure.Mcp>
            <Configure.RadioButton field="mode" initValue="fast" :options="radioButtonProps" />
        </template>
    </AIChatInput>
</template>

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

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

    const suggestions = ref<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.value.length) {
                suggestions.value = [];
            }
            return;
        }
        suggestions.value = value.length ? suggestionTemplate.map((item) => `${value}，${item}`) : [];
    };
</script>

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

<script setup lang="ts">
    import { ref, useTemplateRef } from 'vue';
    import { AIChatInput, type AIChatInputHandle } from '@fibrous/semi-ai-vue';
    import { IconTemplateStroked, IconSearch } from '@fibrous/semi-icons-vue';

    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, typeof IconSearch> = { 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>线下读书会活动 的方案，需要包含但不限于策划目标、详细计划、所需资源和预算、效果评估、风险应对等。',
                },
            ],
        },
    ];

    const groupIndex = ref(0);
    const input = useTemplateRef<AIChatInputHandle>('input');

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

<template>
    <AIChatInput ref="input" placeholder="输入 / 唤起技能，选择技能后，点击模版按钮可查看模版，可通过鼠标上下按键切换侯选项" skillHotKey="/" :skills="skills" style="margin: 12px" :uploadProps="uploadProps">
        <template #configureArea>
            <Configure.Select field="model" initValue="GPT-4o" :optionList="modelOptions" />
        </template>
        <template #skillIcon="{ item }">
            <component :is="skillIcons[item.value ?? '']" />
        </template>
        <template #template="{ skill }">
            <div v-if="skill?.value === 'writing'" class="aiChatInput-template">
                <div class="template-header">
                    <button v-for="(item, index) in templates" :key="item.group" :class="['template-header-item', { 'template-header-item-active': groupIndex === index }]" style="border: none; font-family: inherit" type="button" @click="groupIndex = index">
                        {{ item.group }}
                    </button>
                </div>
                <div class="template-content">
                    <button v-for="item in templates[groupIndex].children" :key="item.title" class="template-content-item" style="font: inherit; text-align: left" type="button" @click="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>
                </div>
            </div>
        </template>
    </AIChatInput>
</template>

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

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

    const references = ref<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,
        },
    ]);

    function isImageType(item: Attachment) {
        const PIC_PREFIX = 'image/';
        const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
        const { name = '', fileInstance } = item;
        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.value = references.value.filter((item) => item.id !== reference.id);
    };
</script>

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

<script setup lang="ts">
    import { computed, defineComponent, h, ref, shallowRef, useTemplateRef, watch, type Component, type CSSProperties } from 'vue';
    import { computePosition, shift } from '@floating-ui/dom';
    import { Node, mergeAttributes } from '@tiptap/core';
    import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention';
    import { NodeViewWrapper, VueNodeViewRenderer, nodeViewProps, posToDOMRect } from '@tiptap/vue-3';
    import { AIChatInput, type AIChatInputHandle, type AIChatInputAttachment as Attachment, type AIChatInputContent as Content, type AIChatInputReference as Reference } from '@fibrous/semi-ai-vue';
    import { IconFile, IconFolder, IconBranch, IconCode, IconGit, IconGlobeStroke, IconChevronRight, IconClose, IconUpload, IconTerminal, IconConnectionPoint2 } from '@fibrous/semi-icons-vue';
    import { useMounted } from '@fibrous/semi-ui-vue/hooks';

    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);

    // Node views must be components but a demo file holds one SFC, so it is a render function
    const ReferSlotView = defineComponent({
        props: nodeViewProps,
        setup: (props) => () => h(NodeViewWrapper, { as: 'span', class: 'ai-chat-input-refer-slot-wrapper' }, () => h('span', { class: 'ai-chat-input-refer-slot' }, props.node.attrs.value ?? '')),
    });

    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 VueNodeViewRenderer(ReferSlotView);
        },
    });

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

    // The Teleport target is the browser's body, which the server render and the hydration pass do not have
    const mounted = useMounted();
    // Suggestion panel state; null means closed
    const panel = shallowRef<MentionPanelProps | null>(null);
    const level = ref(1);
    const options = shallowRef<(string | PanelItem)[]>(FirstLevel);
    const selectedIndex = ref(0);
    const floating = useTemplateRef<HTMLElement>('floating');
    const floatingStyle = ref<CSSProperties>({ position: 'absolute', width: 'max-content', left: '0px', top: '0px' });

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

    watch([options, () => panel.value?.query], () => {
        selectedIndex.value = 0;
    });

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

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

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

    const selectItem = (item: string | PanelItem) => {
        if (typeof item === 'string') {
            level.value = 2;
            options.value = TestAction[item];
        } else {
            panel.value?.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.value === 1) {
            panel.value?.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.value = 1;
                options.value = FirstLevel;
                panel.value = props as MentionPanelProps;
                setHotKeySend(false);
            },
            onUpdate: (props) => {
                // After Escape closes the panel it stays closed until this suggestion ends
                if (panel.value) {
                    panel.value = props as MentionPanelProps;
                }
            },
            onKeyDown: ({ event }) => {
                if (!panel.value) return false;
                if (event.key === 'ArrowUp') {
                    selectedIndex.value = (selectedIndex.value + filterOptions.value.length - 1) % filterOptions.value.length;
                    return true;
                }
                if (event.key === 'ArrowDown') {
                    selectedIndex.value = (selectedIndex.value + 1) % filterOptions.value.length;
                    return true;
                }
                if (event.key === 'Enter') {
                    const item = filterOptions.value[selectedIndex.value];
                    if (item) {
                        selectItem(item);
                    }
                    return true;
                }
                if (event.key === 'Escape') {
                    if (level.value === 1) {
                        closePanel();
                    } else {
                        level.value = 1;
                        options.value = FirstLevel;
                    }
                    return true;
                }
                return false;
            },
            onExit: closePanel,
        }),
    };

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

    const references = ref<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,
        },
    ]);

    function isImageType(item: Attachment) {
        const PIC_PREFIX = 'image/';
        const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
        const { name = '', fileInstance } = item;
        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 input = useTemplateRef<AIChatInputHandle>('input');

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

    const onReferenceDelete = (reference: Reference) => {
        references.value = references.value.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>

<template>
    <AIChatInput
        ref="input"
        class="aiChatInput-customTopSlot"
        :extensions="extensions"
        placeholder="使用 @ 触发"
        :references="references"
        :showReference="false"
        :showUploadFile="false"
        style="margin: 12px"
        :transformer="transformer"
        :uploadProps="uploadProps"
        @contentChange="onContentChange"
        @referenceDelete="onReferenceDelete"
    >
        <template #topSlot="{ attachments, content, references: items, onReferenceDelete: deleteReference, onUploadFileDelete }">
            <div class="ai-chat-input-topSlot">
                <div v-for="(item, index) in richContent(content)" :key="item.key ?? index" class="item">
                    <span class="item-icon">
                        <component :is="refTypeToIconMap[item.type]" v-if="refTypeToIconMap[item.type]" class="item-left item-icon" size="small" />
                        <button aria-label="删除" class="item-icon-delete" type="button" @click="input?.deleteContent(item)">
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">
                        {{ item.name ? item.name : item.value }}
                        <span v-if="item.type === 'branch'" class="detail">{{ item.detail }}</span>
                    </span>
                </div>
                <div v-for="item in items" :key="item.id" class="item">
                    <span class="item-icon">
                        <component :is="refTypeToIconMap[item.type ?? '']" v-if="item.type && refTypeToIconMap[item.type]" class="item-left item-icon" size="small" />
                        <button aria-label="删除" class="item-icon-delete" type="button" @click="deleteReference(item)">
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">
                        {{ item.name }}
                        <span v-if="item.type === 'branch'" class="detail">{{ item.detail }}</span>
                    </span>
                </div>
                <div v-for="item in attachments" :key="item.uid" class="item">
                    <span class="item-icon">
                        <img v-if="isImageType(item)" :alt="item.name" class="item-image item-left" :src="item.url" />
                        <IconUpload v-else class="item-left item-icon" size="small" />
                        <button aria-label="删除" class="item-icon-delete" type="button" @click="onUploadFileDelete(item)">
                            <IconClose size="small" />
                        </button>
                    </span>
                    <span class="item-content">{{ item.name }}</span>
                </div>
            </div>
        </template>
    </AIChatInput>
    <Teleport v-if="mounted" to="body">
        <div v-if="panel" ref="floating" :style="floatingStyle">
            <div class="ai-chat-input-custom-extension-dropdown-menu" role="menu" :style="{ width: level === 1 ? '200px' : '300px' }">
                <template v-if="filterOptions.length">
                    <div v-for="(item, index) in filterOptions" :key="index" :class="['optionItem', { 'is-selected': index === selectedIndex }]" role="menuitem" tabindex="-1" @click="onItemClick(item)" @focusin="selectedIndex = index" @keydown.enter="onItemClick(item)" @mouseenter="selectedIndex = index">
                        <span v-if="typeof item === 'string'">{{ item }}</span>
                        <div v-else class="level2Item">
                            <component :is="item.icon" />
                            <span class="name">{{ item.name }}</span>
                            <span class="path">{{ item.path }}</span>
                        </div>
                        <IconChevronRight v-if="level === 1" class="option-item-arrow" />
                    </div>
                </template>
                <div v-else class="item">No result</div>
            </div>
        </div>
    </Teleport>
</template>