AIChatInput

import { useCallback } from 'react';
import { AIChatInput, type AIChatInputContent as Content } from '@fibrous/semi-ai-react';
import type { UploadOnChangeProps as OnChangeProps } from '@fibrous/semi-ui-react';

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

export default function AIChatInputDemo() {
    const onContentChange = useCallback((content: Content[]) => {
        console.log('onContentChange', content);
    }, []);

    const onUploadChange = useCallback((fileList: OnChangeProps) => {
        console.log('onUploadChange', fileList);
    }, []);

    return <AIChatInput placeholder="输入内容或者上传内容..." uploadProps={uploadProps} onContentChange={onContentChange} onUploadChange={onUploadChange} style={outerStyle} />;
}

import { useState, useCallback } from 'react';
import { AIChatInput, type AIChatInputContent as Content, type AIChatInputReference as Reference } from '@fibrous/semi-ai-react';
import type { UploadOnChangeProps as OnChangeProps, UploadProps } from '@fibrous/semi-ui-react';

const uploadProps: UploadProps = {
    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 outerStyle = { margin: 12 };

const reference: Reference[] = [
    {
        id: '1',
        type: 'text',
        content: '测试文本，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字,这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字',
    },
];

export default function AIChatInputDemo() {
    const [references, setReferences] = useState(reference);
    const [generating, setGenerating] = useState(false);
    const onContentChange = useCallback((content: Content[]) => {
        console.log('onContentChange', content);
    }, []);

    const onUploadChange = useCallback((fileList: OnChangeProps) => {
        console.log('onUploadChange', fileList);
    }, []);

    const toggleGenerate = useCallback(() => {
        setGenerating((value) => !value);
    }, []);

    const onMessageSend = useCallback(() => {
        toggleGenerate();
        setReferences([]);
    }, [toggleGenerate]);

    const handleReferenceDelete = useCallback((item: Reference) => {
        setReferences((references) => {
            const newReference = references.filter((ref) => ref.id !== item.id);
            return newReference;
        });
    }, []);

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

import { useRef, useCallback, useState, type KeyboardEvent, type MouseEvent } from 'react';
import { AIChatInput, type AIChatInputHandle } from '@fibrous/semi-ai-react';

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: 12 };
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> 帮我完成...`,
};

export default function AIChatInputDemo() {
    const [activeIndex, setActiveIndex] = useState(0);
    const ref = useRef<AIChatInputHandle>(null);

    const setTemplate = useCallback(
        (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => {
            const index = Number((event.target as HTMLElement).dataset.index);
            setActiveIndex(index);
            const content = Object.values(temp)[index];
            if (ref.current) {
                ref.current.setContent(content);
                ref.current.focusEditor();
            }
        },
        [ref]
    );

    return (
        <>
            <div className="aiChatInput-radio" role="tablist">
                {Object.keys(temp).map((item, index) => {
                    return (
                        <div
                            className={`aiChatInput-radio-item ${index === activeIndex ? 'aiChatInput-radio-item-selected' : ''}`}
                            key={index}
                            data-index={index}
                            role="tab"
                            aria-selected={index === activeIndex}
                            tabIndex={0}
                            onClick={setTemplate}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    setTemplate(e);
                                }
                            }}
                        >
                            {item}
                        </div>
                    );
                })}
            </div>
            <AIChatInput ref={ref} defaultContent={temp['input-slot']} placeholder="输入内容或者上传内容" uploadProps={uploadProps} style={outerStyle} />
        </>
    );
}

import { useState, useCallback } from 'react';
import { AIChatInput, type AIChatInputReference as Reference } from '@fibrous/semi-ai-react';

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: 12 };
const referenceTemp = [
    {
        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',
    },
];

export default function AIChatInputDemo() {
    const [references, setReferences] = useState(referenceTemp);
    const handleReferenceDelete = useCallback(
        (item: Reference) => {
            const newReference = references.filter((ref) => ref.id !== item.id);
            setReferences(newReference);
        },
        [references]
    );

    const handleReferenceClick = useCallback((item: Reference) => {
        console.log('点击了引用', item);
    }, []);

    return <AIChatInput placeholder="用于查看引用内容的用例" onReferenceDelete={handleReferenceDelete} onReferenceClick={handleReferenceClick} references={references} uploadProps={uploadProps} style={outerStyle} />;
}

import { useCallback } from 'react';
import { AIChatInput, type AIChatInputLeftMenuChangeProps as LeftMenuChangeProps } from '@fibrous/semi-ai-react';
import { IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@fibrous/semi-icons-react';

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

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 = [
    { icon: <IconFeishuLogo />, label: '飞书文档', value: 'feishu' },
    { icon: <IconGit />, label: 'Github Mcp', value: 'github' },
    { icon: <IconFigma />, label: 'IconFigma Mcp', value: 'IconFigma' },
];

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

export default function AIChatInputDemo() {
    const onConfigureButtonClick = useCallback(() => {
        console.log('onConfigureButtonClick');
    }, []);

    const renderLeftMenu = useCallback(
        () => (
            <>
                <Configure.Select optionList={modelOptions} field="model" initValue="GPT-4o" />
                <Configure.Button icon={<IconBookOpenStroked />} field="onlineSearch">
                    联网搜索
                </Configure.Button>
                <Configure.Mcp options={mcpOptions} onConfigureButtonClick={onConfigureButtonClick} showConfigure />
                <Configure.RadioButton options={radioButtonProps} field="thinkType" initValue="fast" />
            </>
        ),
        [onConfigureButtonClick]
    );

    const onConfigureChange = useCallback((value: LeftMenuChangeProps, changedValue?: LeftMenuChangeProps) => {
        console.log('onConfigureChange', value, changedValue);
    }, []);

    return <AIChatInput placeholder="用于查看左下方配置项的用例" renderConfigureArea={renderLeftMenu} onConfigureChange={onConfigureChange} uploadProps={uploadProps} style={outerStyle} />;
}

import { AIChatInput, getConfigureItem, type AIChatInputLeftMenuChangeProps as LeftMenuChangeProps } from '@fibrous/semi-ai-react';
import { Cascader, type CascaderProps } from '@fibrous/semi-ui-react';

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: 12 };
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 myCascader = (props: CascaderProps) => {
    return <Cascader {...props} />;
};

const CustomCascader = getConfigureItem(myCascader, {
    className: 'aiChatInput-cascader-configure',
});

export default function AIChatInputDemo() {
    const renderLeftMenu = () => <CustomCascader field="model" treeData={cascaderModalOptions} initValue={['GPT', 'GPT-4o']} />;

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

    return <AIChatInput placeholder="用于查看左下方配置项的用例" renderConfigureArea={renderLeftMenu} onConfigureChange={onConfigureChange} uploadProps={uploadProps} style={outerStyle} />;
}

import { useCallback } from 'react';
import { AIChatInput, type AIChatInputActionAreaProps as ActionAreaProps } from '@fibrous/semi-ai-react';
import { IconDeleteStroked } from '@fibrous/semi-icons-react';
import { Divider, Button } from '@fibrous/semi-ui-react';

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

export default function AIChatInputDemo() {
    const renderActionArea = useCallback((props: ActionAreaProps) => {
        return (
            <div className={props.className}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button aria-label="清空内容" type="tertiary" style={{ borderRadius: '50%' }} icon={<IconDeleteStroked />} />
                    <Divider layout="vertical" style={{ marginLeft: 8 }} />
                </div>
                {props.menuItem}
            </div>
        );
    }, []);

    return <AIChatInput renderActionArea={renderActionArea} placeholder="输入内容或者上传内容..." uploadProps={uploadProps} style={outerStyle} />;
}

import { AIChatInput } from '@fibrous/semi-ai-react';
import { IconUpload } from '@fibrous/semi-icons-react';

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

export default function AIChatInputDemo() {
    return (
        <AIChatInput
            placeholder="自定义上传按钮（仍支持粘贴上传）"
            uploadProps={uploadProps}
            renderUploadButton={({ openFileDialog, disabled }) => (
                <button
                    type="button"
                    aria-label="上传"
                    disabled={disabled}
                    className="semi-button semi-button-borderless"
                    onClick={(e) => {
                        e.stopPropagation();
                        openFileDialog();
                    }}
                >
                    <IconUpload />
                </button>
            )}
            style={outerStyle}
        />
    );
}

import { useState, useCallback } from 'react';
import { AIChatInput } from '@fibrous/semi-ai-react';
import { IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@fibrous/semi-icons-react';
import { RadioGroup, Radio, type RadioChangeEvent } from '@fibrous/semi-ui-react';

const { Configure } = AIChatInput;
const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: 12 };
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 = [
    { icon: <IconFeishuLogo />, label: '飞书文档', value: 'feishu' },
    { icon: <IconGit />, label: 'Github Mcp', value: 'github' },
    { icon: <IconFigma />, label: 'IconFigma Mcp', value: 'IconFigma' },
];

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

export default function AIChatInputDemo() {
    const [round, setRound] = useState(false);
    const renderLeftMenu = useCallback(
        () => (
            <>
                <Configure.Select optionList={modelOptions} field="model" initValue="GPT-4o" />
                <Configure.Button icon={<IconBookOpenStroked />} field="onlineSearch">
                    联网搜索
                </Configure.Button>
                <Configure.Mcp options={mcpOptions} />
                <Configure.RadioButton options={radioButtonProps} field="mode" initValue="fast" />
            </>
        ),
        []
    );

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

    return (
        <>
            <RadioGroup onChange={onChange} value={round} aria-label="单选组合示例" name="demo-radio-group">
                <Radio value>圆形</Radio>
                <Radio value={false}>方形</Radio>
            </RadioGroup>
            <AIChatInput placeholder="下方按钮为方形的用例" round={round} renderConfigureArea={renderLeftMenu} uploadProps={uploadProps} style={outerStyle} />
        </>
    );
}

import { useState, useCallback } from 'react';
import { AIChatInput, type AIChatInputContent as Content } from '@fibrous/semi-ai-react';

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

export default function AIChatInputDemo() {
    const [suggestion, setSuggestion] = useState<string[]>([]);
    const onChange = useCallback((content: Content[]) => {
        const value = content.length && content[0].text ? content[0].text : undefined;
        if (value === undefined || value.includes('\n') || value.length >= 4) {
            setSuggestion((current) => (current.length ? [] : current));
            return;
        }
        setSuggestion(value.length ? suggestionTemplate.map((item) => `${value}，${item}`) : []);
    }, []);

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

import { useState, useCallback, useRef, type MouseEvent } from 'react';
import { AIChatInput, type AIChatInputHandle, type AIChatInputSkill as Skill } from '@fibrous/semi-ai-react';
import { IconTemplateStroked, IconSearch } from '@fibrous/semi-icons-react';

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 outerStyle = { margin: 12 };
const skills = [
    {
        icon: <IconTemplateStroked />,
        value: 'writing',
        label: '帮我写作',
        hasTemplate: true,
    },
    {
        icon: <IconSearch />,
        value: 'AI 编程',
        label: 'AI coding',
    },
];

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

interface TemplateContentProps {
    onTemplateClick: (content: string) => void;
}

const TemplateContent = ({ onTemplateClick: onTemplateClickProps }: TemplateContentProps) => {
    const [groupIndex, setGroupIndex] = useState(0);

    const onItemClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
        const index = e.currentTarget.dataset.index;
        setGroupIndex(Number(index));
    }, []);

    const onTemplateClick = useCallback(
        ({ content }: { content: string }) => {
            onTemplateClickProps(content);
        },
        [onTemplateClickProps]
    );

    return (
        <div className="aiChatInput-template">
            <div className="template-header">
                {template.map((item, index) => {
                    return (
                        <button type="button" key={index} data-index={index} className={`template-header-item ${groupIndex === index ? 'template-header-item-active' : ''}`} style={{ border: 'none', fontFamily: 'inherit' }} onClick={onItemClick}>
                            {item.group}
                        </button>
                    );
                })}
            </div>
            <div className="template-content">
                {(template[groupIndex]?.children ?? []).map((item, index) => (
                    <button type="button" key={index} className="template-content-item" style={{ font: 'inherit', textAlign: 'left' }} onClick={() => onTemplateClick(item)}>
                        <span className="template-content-item-icon" style={{ background: item.bg }}>
                            {item.icon}
                        </span>
                        <span className="template-content-item-title">{item.title}</span>
                        <span className="template-content-item-desc">{item.desc}</span>
                    </button>
                ))}
            </div>
        </div>
    );
};

export default function AIChatInputDemo() {
    const ref = useRef<AIChatInputHandle>(null);

    const setTemplate = useCallback(
        (content: string) => {
            const element = ref.current;
            if (!element) {
                return;
            }
            element.setContentWhileSaveTool(content);
            element.focusEditor();
        },
        [ref]
    );

    const renderTemplate = useCallback(
        (skill?: Skill) => {
            if (skill?.value === 'writing') {
                return <TemplateContent onTemplateClick={setTemplate} />;
            }
        },
        [setTemplate]
    );

    const renderLeftMenu = useCallback(
        () => (
            <>
                <Configure.Select optionList={modelOptions} field="model" initValue="GPT-4o" />
            </>
        ),
        []
    );

    return <AIChatInput placeholder="输入 / 唤起技能，选择技能后，点击模版按钮可查看模版，可通过鼠标上下按键切换侯选项" renderConfigureArea={renderLeftMenu} ref={ref} uploadProps={uploadProps} skills={skills} skillHotKey="/" renderTemplate={renderTemplate} style={outerStyle} />;
}

import React, { useState, useCallback, useRef } from 'react';
import { AIChatInput, type AIChatInputHandle, type AIChatInputAttachment as Attachment, type AIChatInputReference as Reference, type AIChatInputRenderTopSlotProps as RenderTopSlotProps } from '@fibrous/semi-ai-react';
import { IconClose, IconUpload, IconFile, IconFolder, IconBranch, IconTerminal, IconGlobeStroke, IconConnectionPoint2, IconTemplateStroked, IconSearch, IconGit, IconCode } from '@fibrous/semi-icons-react';

const { Configure } = AIChatInput;
const radioButtonProps = [
    // the icon is the only label, so it carries the name
    { label: <IconTemplateStroked aria-label="快速" />, value: 'fast' },
    { label: <IconSearch aria-label="深度思考" />, value: 'think' },
];
const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: 12 };

const customReferences: 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 = new Map([
    ['file', <IconFile key="file" size="small" />],
    ['folder', <IconFolder key="folder" size="small" />],
    ['branch', <IconBranch key="branch" size="small" />],
    ['terminal', <IconTerminal key="terminal" size="small" />],
    ['web', <IconGlobeStroke key="globalStroke" size="small" />],
    ['change', <IconConnectionPoint2 key="connectionPoint2" size="small" />],
    ['git', <IconGit key="git" size="small" />],
    ['code', <IconCode key="code" size="small" />],
]);

export default function AIChatInputDemo() {
    const ref = useRef<AIChatInputHandle>(null);
    const [reference, setReference] = useState(customReferences);

    const renderLeftMenu = useCallback(
        () => (
            <>
                <Configure.RadioButton options={radioButtonProps} initValue="fast" field="mode" />
            </>
        ),
        []
    );

    const renderTopSlot = useCallback(({ attachments = [], references = [] }: RenderTopSlotProps) => {
        return (
            <div className="ai-chat-input-topSlot">
                {references.map(({ type, name, detail, id }, index) => {
                    const icon = type ? refTypeToIconMap.get(type) : undefined;
                    return (
                        <div className="item" key={id}>
                            <span className="item-icon">
                                {icon && React.cloneElement(icon, { className: 'item-left item-icon' })}
                                <button
                                    type="button"
                                    className="item-icon-delete"
                                    aria-label="删除"
                                    onClick={() => {
                                        const newReferences = [...references];
                                        newReferences.splice(index, 1);
                                        setReference(newReferences);
                                    }}
                                >
                                    <IconClose size="small" />
                                </button>
                            </span>
                            <span className="item-content">
                                {name}
                                {type === 'branch' && <span className="detail">{detail}</span>}
                            </span>
                        </div>
                    );
                })}
                {attachments.map((item) => {
                    const isImage = isImageType(item);
                    const { uid, name } = item;
                    return (
                        <div className="item" key={uid}>
                            <span className="item-icon">
                                {isImage ? <img className="item-image item-left" src={item.url} alt={item.name} /> : <IconUpload size="small" className="item-left item-icon" />}
                                <button
                                    type="button"
                                    className="item-icon-delete"
                                    aria-label="删除"
                                    onClick={() => {
                                        ref.current?.deleteUploadFile(item);
                                    }}
                                >
                                    <IconClose size="small" />
                                </button>
                            </span>
                            <span className="item-content">{name}</span>
                        </div>
                    );
                })}
            </div>
        );
    }, []);

    return <AIChatInput className="aiChatInput-customTopSlot" renderTopSlot={renderTopSlot} references={reference} showUploadFile={false} showReference={false} renderConfigureArea={renderLeftMenu} ref={ref} uploadProps={uploadProps} style={outerStyle} placeholder="自定义渲染顶部内容，可用于渲染上传内容、引用内容" />;
}

import React, { useState, useCallback, useRef, useMemo, useEffect, useImperativeHandle, type ReactNode, type Ref } from 'react';
import { computePosition, shift } from '@floating-ui/dom';
import { Node, mergeAttributes, type Editor } from '@tiptap/core';
import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention';
import { ReactNodeViewRenderer, NodeViewWrapper, posToDOMRect, ReactRenderer, type ReactNodeViewProps } from '@tiptap/react';
import { AIChatInput, type AIChatInputHandle, type AIChatInputAttachment as Attachment, type AIChatInputContent as Content, type AIChatInputReference as Reference, type AIChatInputRenderTopSlotProps as RenderTopSlotProps } from '@fibrous/semi-ai-react';
import { IconFile, IconFolder, IconBranch, IconCode, IconGit, IconGlobeStroke, IconChevronRight, IconClose, IconUpload, IconTerminal, IconConnectionPoint2 } from '@fibrous/semi-icons-react';

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

interface PanelItem {
    icon: ReactNode;
    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);

function ReferSlotComponent({ node }: ReactNodeViewProps) {
    const value = node.attrs.value ? node.attrs.value : '';

    return (
        <NodeViewWrapper className="ai-chat-input-refer-slot-wrapper">
            <span className="ai-chat-input-refer-slot">{value}</span>
        </NodeViewWrapper>
    );
}

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 ReactNodeViewRenderer(ReferSlotComponent);
    },
});

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

const updatePosition = (editor: Editor, element: HTMLElement) => {
    const virtualElement = {
        getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
    };
    void computePosition(virtualElement, element, {
        placement: 'bottom-start',
        strategy: 'absolute',
        middleware: [shift()],
    }).then(({ x, y, strategy }) => {
        element.style.width = 'max-content';
        element.style.position = strategy;
        element.style.left = `${x}px`;
        element.style.top = `${y}px`;
    });
};

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

interface MentionListHandle {
    onKeyDown: (props: { event: KeyboardEvent; exitCb?: () => void }) => boolean;
}

interface MentionListProps extends Omit<MentionStartProps, 'command'> {
    ref?: Ref<MentionListHandle>;
    command: (props: MentionCommandProps) => void;
}

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: () => {
        let component: ReactRenderer<MentionListHandle, MentionListProps>;
        return {
            onStart: (props) => {
                component = new ReactRenderer(MentionList, {
                    props,
                    editor: props.editor,
                });
                if (!props.clientRect) return;
                component.element.style.position = 'absolute';
                document.body.appendChild(component.element);
                updatePosition(props.editor, component.element);
            },
            onUpdate(props) {
                component.updateProps(props);
                if (!props.clientRect) return;
                updatePosition(props.editor, component.element);
            },
            onKeyDown(props) {
                function onExit() {
                    component.destroy();
                }
                return component.ref?.onKeyDown({ ...props, exitCb: onExit }) ?? false;
            },
            onExit() {
                component.element.remove();
                component.destroy();
            },
        };
    },
};

const customReferences: 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 MentionList({ ref, command, query, editor }: MentionListProps) {
    const [level, setLevel] = useState(1);
    const [options, setOptions] = useState<(string | PanelItem)[]>(FirstLevel);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [filterInput, setFilterInput] = useState({ options, query });

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

    if (filterInput.options !== options || filterInput.query !== query) {
        setFilterInput({ options, query });
        setSelectedIndex(0);
    }

    useEffect(() => {
        // While the panel is open, Enter belongs to it, not to AIChatInput's send
        command({ allowHotKeySend: false });
        return () => command({ allowHotKeySend: true });
    }, [command]);

    const selectItem = (item: string | PanelItem) => {
        if (typeof item === 'string') {
            setLevel(2);
            setOptions(TestAction[item]);
        } else {
            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) {
            editor.commands.focus();
        }
    };

    useImperativeHandle(ref, () => ({
        onKeyDown: ({ event, exitCb }) => {
            if (event.key === 'ArrowUp') {
                setSelectedIndex((selectedIndex + filterOptions.length - 1) % filterOptions.length);
                return true;
            }
            if (event.key === 'ArrowDown') {
                setSelectedIndex((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) {
                    exitCb?.();
                } else {
                    setLevel(1);
                    setOptions(FirstLevel);
                }
                return true;
            }
            return false;
        },
    }));

    return (
        <div role="menu" className="ai-chat-input-custom-extension-dropdown-menu" style={{ width: level === 1 ? 200 : 300 }}>
            {filterOptions.length ? (
                filterOptions.map((item, index) => (
                    <div
                        key={index}
                        role="menuitem"
                        tabIndex={-1}
                        className={index === selectedIndex ? 'is-selected optionItem' : 'optionItem '}
                        onClick={() => onItemClick(item)}
                        onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                                onItemClick(item);
                            }
                        }}
                        onMouseEnter={() => setSelectedIndex(index)}
                    >
                        {typeof item === 'string' ? (
                            <span>{item}</span>
                        ) : (
                            <div className="level2Item">
                                {item.icon}
                                <span className="name">{item.name}</span>
                                <span className="path">{item.path}</span>
                            </div>
                        )}
                        {level === 1 && <IconChevronRight className="option-item-arrow" />}
                    </div>
                ))
            ) : (
                <div className="item">No result</div>
            )}
        </div>
    );
}

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 = new Map([
    ['file', <IconFile key="file" size="small" />],
    ['folder', <IconFolder key="folder" size="small" />],
    ['branch', <IconBranch key="branch" size="small" />],
    ['terminal', <IconTerminal key="terminal" size="small" />],
    ['web', <IconGlobeStroke key="globalStroke" size="small" />],
    ['change', <IconConnectionPoint2 key="connectionPoint2" size="small" />],
    ['git', <IconGit key="git" size="small" />],
    ['code', <IconCode key="code" size="small" />],
]);

export default function AIChatInputDemo() {
    const ref = useRef<AIChatInputHandle>(null);
    const [reference, setReference] = useState(customReferences);
    const extensions = useMemo(() => {
        return [
            ReferSlot,
            Mention.configure({
                HTMLAttributes: {
                    class: 'mention',
                },
                suggestion,
            }),
        ];
    }, []);
    const renderTopSlot = useCallback(({ attachments = [], references = [], content = [] }: RenderTopSlotProps) => {
        const showContent = content.filter((item) => item.type !== 'text');
        return (
            <div className="ai-chat-input-topSlot">
                {showContent.map((item, index) => {
                    const { type, value, name, key, detail } = item;
                    const icon = refTypeToIconMap.get(type);
                    return (
                        <div className="item" key={key ? key : index}>
                            <span className="item-icon">
                                {icon && React.cloneElement(icon, { className: 'item-left item-icon' })}
                                <button
                                    type="button"
                                    className="item-icon-delete"
                                    aria-label="删除"
                                    onClick={() => {
                                        if (ref.current && ref.current.deleteContent) {
                                            ref.current.deleteContent(item);
                                        }
                                    }}
                                >
                                    <IconClose size="small" />
                                </button>
                            </span>
                            <span className="item-content">
                                {name ? name : value}
                                {type === 'branch' && <span className="detail">{detail}</span>}
                            </span>
                        </div>
                    );
                })}
                {references.map(({ type, name, detail, id }, index) => {
                    const icon = type ? refTypeToIconMap.get(type) : undefined;
                    return (
                        <div className="item" key={id}>
                            <span className="item-icon">
                                {icon && React.cloneElement(icon, { className: 'item-left item-icon' })}
                                <button
                                    type="button"
                                    className="item-icon-delete"
                                    aria-label="删除"
                                    onClick={() => {
                                        const newReferences = [...references];
                                        newReferences.splice(index, 1);
                                        setReference(newReferences);
                                    }}
                                >
                                    <IconClose size="small" />
                                </button>
                            </span>
                            <span className="item-content">
                                {name}
                                {type === 'branch' && <span className="detail">{detail}</span>}
                            </span>
                        </div>
                    );
                })}
                {attachments.map((item) => {
                    const isImage = isImageType(item);

                    const { uid, name } = item;
                    return (
                        <div className="item" key={uid}>
                            <span className="item-icon">
                                {isImage ? <img className="item-image item-left" src={item.url} alt={item.name} /> : <IconUpload size="small" className="item-left item-icon" />}
                                <button
                                    type="button"
                                    className="item-icon-delete"
                                    aria-label="删除"
                                    onClick={() => {
                                        if (ref.current && ref.current.deleteUploadFile) {
                                            ref.current.deleteUploadFile(item);
                                        }
                                    }}
                                >
                                    <IconClose size="small" />
                                </button>
                            </span>
                            <span className="item-content">{name}</span>
                        </div>
                    );
                })}
            </div>
        );
    }, []);
    const onContentChange = useCallback((content: Content[]) => {
        console.log('onContentChange', content);
    }, []);
    const transformer = useMemo(() => {
        return new Map([
            [
                'referSlot',
                ({ attrs }: { attrs: ReferSlotAttrs }) => {
                    const { value, info, type = 'text', uniqueKey } = attrs;
                    return {
                        type: type,
                        value: value,
                        uniqueKey: uniqueKey,
                        ...JSON.parse(info),
                    };
                },
            ],
        ]);
    }, []);
    return (
        <>
            <AIChatInput
                className="aiChatInput-customTopSlot"
                renderTopSlot={renderTopSlot}
                extensions={extensions}
                references={reference}
                showUploadFile={false}
                showReference={false}
                onContentChange={onContentChange}
                ref={ref}
                transformer={transformer}
                uploadProps={uploadProps}
                style={outerStyle}
                placeholder="使用 @ 触发"
            />
        </>
    );
}