聊天输入框

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

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

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

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

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

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

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: '12px' };

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

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

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

export default function AIChatInputDemo() {
    const [references, setReferences] = createSignal(reference);
    const [generating, setGenerating] = createSignal(false);

    const toggleGenerate = () => {
        setGenerating((value) => !value);
    };

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

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

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

import { For, createSignal } from 'solid-js';
import { AIChatInput, type AIChatInputElement } from '@fibrous/semi-ai-solid';

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: '12px' };
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 tabs = Object.keys(temp) as Array<keyof typeof temp>;

export default function AIChatInputDemo() {
    const [activeIndex, setActiveIndex] = createSignal(0);
    let input: AIChatInputElement | undefined;

    const setTemplate = (index: number) => {
        setActiveIndex(index);
        input?.setContent(temp[tabs[index]]);
        input?.focusEditor();
    };

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

import { createSignal } from 'solid-js';
import { AIChatInput, type AIChatInputReference as Reference } from '@fibrous/semi-ai-solid';

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: '12px' };
const referenceTemp: 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 handleReferenceClick = (item: Reference) => {
    console.log('点击了引用', item);
};

export default function AIChatInputDemo() {
    const [references, setReferences] = createSignal(referenceTemp);

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

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

import type { Component } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { AIChatInput, type AIChatInputLeftMenuChangeProps as LeftMenuChangeProps } from '@fibrous/semi-ai-solid';
import { IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@fibrous/semi-icons-solid';

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

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

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

export default function AIChatInputDemo() {
    const renderLeftMenu = () => (
        <>
            <Configure.Select optionList={modelOptions} field="model" initValue="GPT-4o" />
            <Configure.Button icon={<IconBookOpenStroked />} field="onlineSearch">
                联网搜索
            </Configure.Button>
            <Configure.Mcp options={mcpOptions} renderOptionIcon={(option) => <Dynamic component={mcpIcons[option.value]} />} onConfigureButtonClick={onConfigureButtonClick} showConfigure />
            <Configure.RadioButton options={radioButtonProps} field="thinkType" initValue="fast" />
        </>
    );

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

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

const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: '12px' };
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, {
    class: 'aiChatInput-cascader-configure',
});

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

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

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

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

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

const renderActionArea = (props: ActionAreaProps) => (
    <div class={props.class}>
        <div style={{ display: 'flex', 'align-items': 'center' }}>
            <Button aria-label="清空内容" type="tertiary" style={{ 'border-radius': '50%' }} icon={<IconDeleteStroked />} />
            <Divider layout="vertical" style={{ 'margin-left': '8px' }} />
        </div>
        {props.menuItem}
    </div>
);

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

import { AIChatInput, type RenderUploadButtonProps } from '@fibrous/semi-ai-solid';
import { IconUpload } from '@fibrous/semi-icons-solid';

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

const renderUploadButton = (props: RenderUploadButtonProps) => (
    <button
        type="button"
        aria-label="上传"
        disabled={props.disabled}
        class="semi-button semi-button-borderless"
        onClick={(e) => {
            e.stopPropagation();
            props.openFileDialog();
        }}
    >
        <IconUpload />
    </button>
);

export default function AIChatInputDemo() {
    return <AIChatInput placeholder="自定义上传按钮（仍支持粘贴上传）" uploadProps={uploadProps} renderUploadButton={renderUploadButton} style={outerStyle} />;
}

import { type Component, createSignal } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { AIChatInput } from '@fibrous/semi-ai-solid';
import { IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@fibrous/semi-icons-solid';
import { Radio, RadioGroup } from '@fibrous/semi-ui-solid';

const { Configure } = AIChatInput;
const uploadProps = { action: 'https://api.semi.design/upload' };
const outerStyle = { margin: '12px' };
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 radioButtonProps = [
    { label: '极速', value: 'fast' },
    { label: '思考', value: 'think' },
    { label: '超能', value: 'super' },
];

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

export default function AIChatInputDemo() {
    const [round, setRound] = createSignal(false);

    const renderLeftMenu = () => (
        <>
            <Configure.Select optionList={modelOptions} field="model" initValue="GPT-4o" />
            <Configure.Button icon={<IconBookOpenStroked />} field="onlineSearch">
                联网搜索
            </Configure.Button>
            <Configure.Mcp options={mcpOptions} renderOptionIcon={(option) => <Dynamic component={mcpIcons[option.value]} />} />
            <Configure.RadioButton options={radioButtonProps} field="mode" initValue="fast" />
        </>
    );

    return (
        <>
            <RadioGroup onChange={(event) => setRound(event.target.value)} 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 { createSignal } from 'solid-js';
import { AIChatInput, type AIChatInputContent as Content } from '@fibrous/semi-ai-solid';

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

export default function AIChatInputDemo() {
    const [suggestion, setSuggestion] = createSignal<string[]>([]);

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

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

import { For, createSignal } from 'solid-js';
import { AIChatInput, type AIChatInputElement, type AIChatInputSkill as Skill } from '@fibrous/semi-ai-solid';
import { IconTemplateStroked, IconSearch } from '@fibrous/semi-icons-solid';

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: '12px' };

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

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

function TemplateContent(props: TemplateContentProps) {
    const [groupIndex, setGroupIndex] = createSignal(0);

    return (
        <div class="aiChatInput-template">
            <div class="template-header">
                <For each={template}>
                    {(item, index) => (
                        <button type="button" class={`template-header-item ${groupIndex() === index() ? 'template-header-item-active' : ''}`} style={{ border: 'none', 'font-family': 'inherit' }} onClick={() => setGroupIndex(index())}>
                            {item.group}
                        </button>
                    )}
                </For>
            </div>
            <div class="template-content">
                <For each={template[groupIndex()]?.children ?? []}>
                    {(item) => (
                        <button type="button" class="template-content-item" style={{ font: 'inherit', 'text-align': 'left' }} onClick={() => props.onTemplateClick(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>
                    )}
                </For>
            </div>
        </div>
    );
}

export default function AIChatInputDemo() {
    let input: AIChatInputElement | undefined;

    const skills: Skill[] = [
        { value: 'writing', label: '帮我写作', hasTemplate: true },
        { value: 'AI 编程', label: 'AI coding' },
    ];

    const renderSkillIcon = (skill: Skill) => (skill.value === 'writing' ? <IconTemplateStroked /> : <IconSearch />);

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

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

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

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

import { For, Show, type Component, createSignal } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { AIChatInput, type AIChatInputAttachment as Attachment, type AIChatInputElement, type AIChatInputReference as Reference, type AIChatInputRenderTopSlotProps as RenderTopSlotProps } from '@fibrous/semi-ai-solid';
import { IconClose, IconUpload, IconFile, IconFolder, IconBranch, IconTerminal, IconGlobeStroke, IconConnectionPoint2, IconTemplateStroked, IconSearch, IconGit, IconCode, type IconProps } from '@fibrous/semi-icons-solid';

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

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

// Icon components rather than elements: the top slot renders each one through Dynamic, with its own props
const refTypeToIconMap = new Map<string, Component<IconProps>>([
    ['file', IconFile],
    ['folder', IconFolder],
    ['branch', IconBranch],
    ['terminal', IconTerminal],
    ['web', IconGlobeStroke],
    ['change', IconConnectionPoint2],
    ['git', IconGit],
    ['code', IconCode],
]);

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

// the icon is the only visible label, so the label text becomes its name
const radioButtonProps = [
    { label: '快速', value: 'fast' },
    { label: '深度思考', value: 'think' },
];

const radioIcons: Record<string, Component<IconProps>> = {
    fast: IconTemplateStroked,
    think: IconSearch,
};

export default function AIChatInputDemo() {
    let input: AIChatInputElement | undefined;
    const [reference, setReference] = createSignal(customReferences);

    const renderLeftMenu = () => (
        <>
            <Configure.RadioButton options={radioButtonProps} renderLabel={(option) => <Dynamic component={radioIcons[String(option.value)]} aria-label={String(option.label)} />} initValue="fast" field="mode" />
        </>
    );

    const renderTopSlot = (slot: RenderTopSlotProps) => (
        <div class="ai-chat-input-topSlot">
            <For each={slot.references}>
                {(item) => (
                    <div class="item">
                        <span class="item-icon">
                            <Show when={item.type && refTypeToIconMap.get(item.type)} keyed>
                                {(icon) => <Dynamic component={icon} size="small" class="item-left item-icon" />}
                            </Show>
                            <button type="button" class="item-icon-delete" aria-label="删除" onClick={() => setReference((list) => list.filter((ref) => ref.id !== item.id))}>
                                <IconClose size="small" />
                            </button>
                        </span>
                        <span class="item-content">
                            {item.name}
                            <Show when={item.type === 'branch'}>
                                <span class="detail">{item.detail}</span>
                            </Show>
                        </span>
                    </div>
                )}
            </For>
            <For each={slot.attachments}>
                {(item) => (
                    <div class="item">
                        <span class="item-icon">
                            <Show when={isImageType(item)} fallback={<IconUpload size="small" class="item-left item-icon" />}>
                                <img class="item-image item-left" src={item.url} alt={item.name} />
                            </Show>
                            <button type="button" class="item-icon-delete" aria-label="删除" onClick={() => input?.deleteUploadFile(item)}>
                                <IconClose size="small" />
                            </button>
                        </span>
                        <span class="item-content">{item.name}</span>
                    </div>
                )}
            </For>
        </div>
    );

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

import { For, Show, type Accessor, type Component, type Setter, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js';
import { Dynamic, render } from 'solid-js/web';
import { computePosition, shift } from '@floating-ui/dom';
import { Node, mergeAttributes, posToDOMRect, type Editor } from '@tiptap/core';
import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention';
import { AIChatInput, type AIChatInputAttachment as Attachment, type AIChatInputContent as Content, type AIChatInputElement, type AIChatInputReference as Reference, type AIChatInputRenderTopSlotProps as RenderTopSlotProps } from '@fibrous/semi-ai-solid';
import { IconFile, IconFolder, IconBranch, IconCode, IconGit, IconGlobeStroke, IconChevronRight, IconClose, IconUpload, IconTerminal, IconConnectionPoint2, type IconProps } from '@fibrous/semi-icons-solid';

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

interface PanelItem {
    icon: Component<IconProps>;
    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 Solid 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;
}

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

// tiptap types the command with the node attributes only; the panel also passes its item and hot key flag through it
interface PanelProps extends Omit<MentionStartProps, 'command'> {
    command: (props: MentionCommandProps) => void;
}

interface MentionListProps {
    /** The suggestion plugin pushes a new props object on every update, so the panel reads it through this accessor */
    current: Accessor<PanelProps>;
    register: (handle: MentionListHandle) => 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 element: HTMLDivElement | undefined;
        let dispose: (() => void) | undefined;
        let setPanel: Setter<PanelProps> | undefined;
        let handle: MentionListHandle | undefined;

        const onExit = () => {
            dispose?.();
        };

        return {
            onStart: (start) => {
                const [current, setCurrent] = createSignal(start as PanelProps);
                setPanel = setCurrent;
                element = document.createElement('div');
                dispose = render(() => <MentionList current={current} register={(next) => (handle = next)} />, element);
                if (!start.clientRect) return;
                element.style.position = 'absolute';
                document.body.appendChild(element);
                updatePosition(start.editor, element);
            },
            onUpdate(next) {
                setPanel?.(next as PanelProps);
                if (!next.clientRect || !element) return;
                updatePosition(next.editor, element);
            },
            onKeyDown(props) {
                return handle?.onKeyDown({ ...props, exitCb: onExit }) ?? false;
            },
            onExit() {
                element?.remove();
                dispose?.();
            },
        };
    },
};

function MentionList(props: MentionListProps) {
    const [level, setLevel] = createSignal(1);
    const [options, setOptions] = createSignal<(string | PanelItem)[]>(FirstLevel);
    const [selectedIndex, setSelectedIndex] = createSignal(0);

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

    // a new list or query starts again from the first match
    createEffect(on([options, () => props.current().query], () => setSelectedIndex(0), { defer: true }));

    // While the panel is open, Enter belongs to it, not to AIChatInput's send
    onMount(() => {
        props.current().command({ allowHotKeySend: false });
        onCleanup(() => props.current().command({ allowHotKeySend: true }));
    });

    const selectItem = (item: string | PanelItem) => {
        if (typeof item === 'string') {
            setLevel(2);
            setOptions(TestAction[item]);
        } else {
            props.current().command({ item });
        }
    };

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

    // registered once mounted: the suggestion plugin forwards key presses to the handle from then on
    onMount(() => {
        props.register({
            onKeyDown: ({ event, exitCb }) => {
                const list = filterOptions();
                if (event.key === 'ArrowUp') {
                    setSelectedIndex((selectedIndex() + list.length - 1) % list.length);
                    return true;
                }
                if (event.key === 'ArrowDown') {
                    setSelectedIndex((selectedIndex() + 1) % list.length);
                    return true;
                }
                if (event.key === 'Enter') {
                    const item = list[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" class="ai-chat-input-custom-extension-dropdown-menu" style={{ width: level() === 1 ? '200px' : '300px' }}>
            <Show when={filterOptions().length} fallback={<div class="item">No result</div>}>
                <For each={filterOptions()}>
                    {(item, index) => (
                        <div
                            role="menuitem"
                            tabIndex={-1}
                            class={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 class="level2Item">
                                    <Dynamic component={item.icon} />
                                    <span class="name">{item.name}</span>
                                    <span class="path">{item.path}</span>
                                </div>
                            )}
                            <Show when={level() === 1}>
                                <IconChevronRight class="option-item-arrow" />
                            </Show>
                        </div>
                    )}
                </For>
            </Show>
        </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;
}

// Icon components rather than elements: the top slot renders each one through Dynamic, with its own props
const refTypeToIconMap = new Map<string, Component<IconProps>>([
    ['file', IconFile],
    ['folder', IconFolder],
    ['branch', IconBranch],
    ['terminal', IconTerminal],
    ['web', IconGlobeStroke],
    ['change', IconConnectionPoint2],
    ['git', IconGit],
    ['code', IconCode],
]);

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

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

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

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

export default function AIChatInputDemo() {
    let input: AIChatInputElement | undefined;
    const [reference, setReference] = createSignal(customReferences);

    const renderTopSlot = (slot: RenderTopSlotProps) => (
        <div class="ai-chat-input-topSlot">
            <For each={slot.content.filter((item) => item.type !== 'text')}>
                {(item) => (
                    <div class="item">
                        <span class="item-icon">
                            <Show when={item.type && refTypeToIconMap.get(item.type)} keyed>
                                {(icon) => <Dynamic component={icon} size="small" class="item-left item-icon" />}
                            </Show>
                            <button type="button" class="item-icon-delete" aria-label="删除" onClick={() => input?.deleteContent(item)}>
                                <IconClose size="small" />
                            </button>
                        </span>
                        <span class="item-content">
                            {item.name ? item.name : item.value}
                            <Show when={item.type === 'branch'}>
                                <span class="detail">{item.detail}</span>
                            </Show>
                        </span>
                    </div>
                )}
            </For>
            <For each={slot.references}>
                {(item) => (
                    <div class="item">
                        <span class="item-icon">
                            <Show when={item.type && refTypeToIconMap.get(item.type)} keyed>
                                {(icon) => <Dynamic component={icon} size="small" class="item-left item-icon" />}
                            </Show>
                            <button type="button" class="item-icon-delete" aria-label="删除" onClick={() => setReference((list) => list.filter((ref) => ref.id !== item.id))}>
                                <IconClose size="small" />
                            </button>
                        </span>
                        <span class="item-content">
                            {item.name}
                            <Show when={item.type === 'branch'}>
                                <span class="detail">{item.detail}</span>
                            </Show>
                        </span>
                    </div>
                )}
            </For>
            <For each={slot.attachments}>
                {(item) => (
                    <div class="item">
                        <span class="item-icon">
                            <Show when={isImageType(item)} fallback={<IconUpload size="small" class="item-left item-icon" />}>
                                <img class="item-image item-left" src={item.url} alt={item.name} />
                            </Show>
                            <button type="button" class="item-icon-delete" aria-label="删除" onClick={() => input?.deleteUploadFile(item)}>
                                <IconClose size="small" />
                            </button>
                        </span>
                        <span class="item-content">{item.name}</span>
                    </div>
                )}
            </For>
        </div>
    );

    return (
        <AIChatInput
            class="aiChatInput-customTopSlot"
            renderTopSlot={renderTopSlot}
            extensions={extensions}
            references={reference()}
            showUploadFile={false}
            showReference={false}
            onContentChange={onContentChange}
            ref={(element) => (input = element)}
            transformer={transformer}
            uploadProps={uploadProps}
            style={outerStyle}
            placeholder="使用 @ 触发"
        />
    );
}