对话

import { createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatProps } from '@fibrous/semi-ai-solid';
import { Radio, RadioGroup } from '@fibrous/semi-ui-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: '给一个 Semi Design 的 Button 组件的使用示例',
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: "以下是一个 Semi 代码的使用示例：\n```jsx \nimport React from 'react';\nimport { Button } from '@fibrous/semi-ui-react';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n```\n",
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    margin: '8px 16px',
    height: '550px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}

const uploadProps = { action: 'https://api.semi.design/upload' };
const uploadTipProps = { content: '自定义上传按钮提示信息' };

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);
    const [mode, setMode] = createSignal<NonNullable<ChatProps['mode']>>('bubble');
    const [align, setAlign] = createSignal<NonNullable<ChatProps['align']>>('leftRight');

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: '这是一条 mock 回复信息',
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    const onMessageReset = () => {
        setTimeout(() => {
            setChats((list) => {
                const lastMessage = list[list.length - 1];
                const newLastMessage: Message = {
                    ...lastMessage,
                    status: 'complete',
                    content: 'This is a mock reset message.',
                };
                return [...list.slice(0, -1), newLastMessage];
            });
        }, 200);
    };

    return (
        <>
            <span style={{ display: 'flex', 'flex-direction': 'column', 'row-gap': '8px' }}>
                <span style={{ display: 'flex', 'align-items': 'center', 'column-gap': '10px' }}>
                    模式
                    <RadioGroup onChange={(e) => setMode(e.target.value)} value={mode()} type="button">
                        <Radio value="bubble">气泡</Radio>
                        <Radio value="noBubble">非气泡</Radio>
                        <Radio value="userBubble">用户会话气泡</Radio>
                    </RadioGroup>
                </span>
                <span style={{ display: 'flex', 'align-items': 'center', 'column-gap': '10px' }}>
                    会话布局方式
                    <RadioGroup onChange={(e) => setAlign(e.target.value)} value={align()} type="button">
                        <Radio value="leftRight">左右分布</Radio>
                        <Radio value="leftAlign">左对齐</Radio>
                    </RadioGroup>
                </span>
            </span>
            <Chat align={align()} mode={mode()} uploadProps={uploadProps} style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} onMessageReset={onMessageReset} uploadTipProps={uploadTipProps} />
        </>
    );
}

import { createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message } from '@fibrous/semi-ai-solid';

const defaultMessage: Message[] = [
    {
        role: 'assistant',
        id: '1',
        createAt: 1715676751919,
        content: '请求成功',
    },
    {
        id: 'loading',
        role: 'assistant',
        status: 'loading',
    },
    {
        role: 'assistant',
        id: 'error',
        content: '请求错误',
        status: 'error',
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: '这是一条 mock 回复信息',
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return <Chat style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} uploadProps={uploadProps} />;
}

import { createSignal, onCleanup, onMount } from 'solid-js';
import { Chat, type ChatMessage as Message } from '@fibrous/semi-ai-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: '介绍一下 Semi design',
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: `
Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统。作为一个全面、易用、优质的现代应用UI解决方案，Semi Design从字节跳动各业务线的复杂场景中提炼而来，目前已经支撑了近千个平台产品，服务了内外部超过10万用户[[1]](https://semi.design/zh-CN/start/introduction)。

Semi Design的特点包括：

1. 设计简洁、现代化。
2. 提供主题方案，可深度样式定制。
3. 提供明暗色两套模式，切换方便。
4. 国际化，覆盖了简/繁体中文、英语、日语、韩语、葡萄牙语等20+种语言，日期时间组件提供全球时区支持，全部组件可自动适配阿拉伯文RTL布局。
5. 采用 Foundation 和 Adapter 跨框架技术方案，方便扩展。

---
Learn more:
1. [Introduction 介绍 - Semi Design](https://semi.design/zh-CN/start/introduction)
2. [Getting Started 快速开始 - Semi Design](https://semi.design/zh-CN/start/getting-started)
3. [Semi D2C 设计稿转代码的演进之路 - 知乎](https://zhuanlan.zhihu.com/p/667189184)
`,
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '600px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);
    // the interval outlives the send that started it, so it is cleared when the demo unmounts too
    let intervalId: number | undefined;
    // registered on mount: a server render disposes without mounting and has no window
    onMount(() => onCleanup(() => window.clearInterval(intervalId)));

    const generateMockResponse = (content: string) => {
        const id = window.setInterval(() => {
            setChats((list) => {
                const lastMessage = list[list.length - 1];
                let newMessage: Message = { ...lastMessage };
                if (lastMessage.status === 'loading') {
                    newMessage = {
                        ...newMessage,
                        content: `mock Response for ${content} \n`,
                        status: 'incomplete',
                    };
                } else if (lastMessage.status === 'incomplete') {
                    if ((lastMessage.content?.length ?? 0) > 200) {
                        window.clearInterval(id);
                        intervalId = undefined;
                        newMessage = {
                            ...newMessage,
                            content: `${lastMessage.content} mock stream message`,
                            status: 'complete',
                        };
                    } else {
                        newMessage = {
                            ...newMessage,
                            content: `${lastMessage.content} mock stream message`,
                        };
                    }
                }
                return [...list.slice(0, -1), newMessage];
            });
        }, 400);
        intervalId = id;
    };

    const onMessageSend = (content: string) => {
        setChats((list) => [
            ...list,
            {
                role: 'assistant',
                status: 'loading',
                createAt: Date.now(),
                id: getId(),
            },
        ]);
        generateMockResponse(content);
    };

    const onStopGenerator = () => {
        if (intervalId) {
            window.clearInterval(intervalId);
            setChats((list) => {
                const lastMessage = list[list.length - 1];
                if (lastMessage.status && lastMessage.status !== 'complete') {
                    return [...list.slice(0, -1), { ...lastMessage, status: 'complete' }];
                }
                return list;
            });
        }
    };

    return <Chat chats={chats()} showStopGenerate style={commonOuterStyle} onStopGenerator={onStopGenerator} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} uploadProps={uploadProps} />;
}

import { createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message } from '@fibrous/semi-ai-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: '介绍一下 semi design',
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统',
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    margin: '8px 16px',
    height: '550px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}

const uploadProps = { action: 'https://api.semi.design/upload' };
const uploadTipProps = { content: '自定义上传按钮提示信息' };

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: '这是一条 mock 回复信息',
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    const onMessageReset = () => {
        setTimeout(() => {
            setChats((list) => {
                const lastMessage = list[list.length - 1];
                const newLastMessage: Message = {
                    ...lastMessage,
                    status: 'complete',
                    content: 'This is a mock reset message.',
                };
                return [...list.slice(0, -1), newLastMessage];
            });
        }, 200);
    };

    return <Chat uploadProps={uploadProps} style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} onMessageReset={onMessageReset} uploadTipProps={uploadTipProps} showClearContext />;
}

import { createMemo, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderAvatarProps as RenderAvatarProps, type ChatRenderTitleProps as RenderTitleProps } from '@fibrous/semi-ai-solid';
import { Avatar, Radio, RadioGroup } from '@fibrous/semi-ui-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: [
            {
                type: 'text',
                text: '这张图片里有什么？',
            },
            {
                type: 'image_url',
                image_url: {
                    url: '/assets/root-web-sites/edit-bag.jpeg',
                },
            },
        ],
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: '图片中是一个有卡通画像装饰的黄色背包。',
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const formatTime = (createAt?: number) => {
    const date = new Date(createAt ?? Date.now());
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    return `${hours}:${minutes}`;
};

export default function ChatDemo() {
    const [title, setTitle] = createSignal('null');
    const [avatar, setAvatar] = createSignal('null');
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const customRenderAvatar = createMemo(() => {
        if (avatar() === 'custom') {
            return (props: RenderAvatarProps) => (
                <Avatar size="extra-small" shape="square" style={{ 'flex-shrink': '0' }}>
                    {props.role?.name}
                </Avatar>
            );
        }
        if (avatar() === 'null') {
            return () => null;
        }
        return undefined;
    });

    const customRenderTitle = createMemo(() => {
        if (title() === 'custom') {
            return (props: RenderTitleProps) => (
                <span class="title">
                    {props.role?.name}
                    <span class="time">{formatTime(props.message?.createAt)}</span>
                </span>
            );
        }
        if (title() === 'null') {
            return () => null;
        }
        return undefined;
    });

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            content: `This is a mock response`,
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return (
        <>
            <span style={{ display: 'flex', 'flex-direction': 'column', 'row-gap': '8px', 'margin-bottom': '5px' }}>
                <span style={{ display: 'flex', 'align-items': 'center', 'column-gap': '10px' }}>
                    头像渲染模式
                    <RadioGroup onChange={(e) => setAvatar(e.target.value)} value={avatar()} type="button">
                        <Radio value="default">默认头像</Radio>
                        <Radio value="null">无头像</Radio>
                        <Radio value="custom">自定义头像</Radio>
                    </RadioGroup>
                </span>
                <span style={{ display: 'flex', 'align-items': 'center', 'column-gap': '10px' }}>
                    标题渲染模式
                    <RadioGroup onChange={(e) => setTitle(e.target.value)} value={title()} type="button">
                        <Radio value="default">默认标题</Radio>
                        <Radio value="null">无标题</Radio>
                        <Radio value="custom">自定义标题</Radio>
                    </RadioGroup>
                </span>
            </span>
            <Chat
                chatBoxRenderConfig={{
                    renderChatBoxTitle: customRenderTitle(),
                    renderChatBoxAvatar: customRenderAvatar(),
                }}
                style={commonOuterStyle}
                class="component-chat-demo-custom-render"
                chats={chats()}
                onChatsChange={(next) => setChats(next)}
                onMessageSend={onMessageSend}
                roleConfig={roleInfo}
                uploadProps={uploadProps}
            />
        </>
    );
}

import { For, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderActionProps as RenderActionProps } from '@fibrous/semi-ai-solid';
import { IconForward, IconMoreStroked } from '@fibrous/semi-icons-solid';
import { Button, Dropdown, DropdownItem, DropdownMenu } from '@fibrous/semi-ui-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: '介绍一下 semi design',
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统',
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const renderChatBoxAction = (props: RenderActionProps) => (
    <span class={props.class}>
        <For each={props.defaultActions}>{(action) => action()}</For>

        <Dropdown
            render={
                <DropdownMenu>
                    <DropdownItem icon={<IconForward />}>分享</DropdownItem>
                </DropdownMenu>
            }
            trigger="click"
            position="top"
        >
            {(trigger) => <Button {...trigger()} class="semi-chat-chatBox-action-btn" aria-label="更多" icon={<IconMoreStroked />} theme="borderless" type="tertiary" />}
        </Dropdown>
    </span>
);

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            content: `This is a mock response`,
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return <Chat chatBoxRenderConfig={{ renderChatBoxAction }} style={commonOuterStyle} chats={chats()} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} roleConfig={roleInfo} uploadProps={uploadProps} />;
}

import { For, Show, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderContentProps as RenderContentProps } from '@fibrous/semi-ai-solid';
import { IconChevronUp } from '@fibrous/semi-icons-solid';
import { Avatar, AvatarGroup, MarkdownRender } from '@fibrous/semi-ui-solid';

interface Source {
    avatar: string;
    url: string;
    title: string;
    subTitle: string;
    content: string;
}

const defaultMessage: Message[] = [
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。',
        source: [
            {
                avatar: '/assets/placeholder/logo.svg',
                url: '/zh-CN/start/introduction',
                title: 'semi Design',
                subTitle: 'Semi design website',
                content: 'Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。',
            },
            {
                avatar: '/assets/placeholder/logo.svg',
                url: '/dsm/landing',
                subTitle: 'Semi DSM website',
                title: 'Semi 设计系统',
                content: '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中',
            },
            {
                avatar: '/assets/placeholder/logo.svg',
                url: '/code/zh-CN/start/introduction',
                subTitle: 'Semi D2C website',
                title: '设计稿转代码',
                content: 'Semi 设计稿转代码（Semi Design to Code，或简称 Semi D2C），是由抖音前端 Semi Design 团队推出的全新的提效工具',
            },
        ],
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '500px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const SourceCard = (props: { source: Source[] }) => {
    const [open, setOpen] = createSignal(true);

    return (
        <div
            style={{
                transition: open() ? 'height 0.4s ease, width 0.4s ease' : 'height 0.4s ease',
                height: open() ? '30px' : '200px',
                width: open() ? '190px' : '100%',
                background: 'var(--semi-color-tertiary-light-hover)',
                'border-radius': '16px',
                'box-sizing': 'border-box',
                'margin-bottom': '10px',
            }}
        >
            <button
                type="button"
                style={{
                    display: open() ? 'flex' : 'none',
                    width: 'fit-content',
                    'column-gap': '10px',
                    border: 'none',
                    background: 'var(--semi-color-tertiary-light-hover)',
                    'border-radius': '16px',
                    padding: '5px 10px',
                    cursor: 'pointer',
                    'font-family': 'inherit',
                    'font-size': '14px',
                    'line-height': 'inherit',
                    color: 'var(--semi-color-text-1)',
                }}
                onClick={() => setOpen(false)}
            >
                <span>基于{props.source.length}个搜索来源</span>
                <AvatarGroup size="extra-extra-small">
                    <For each={props.source}>{(source) => <Avatar src={source.avatar} alt="" />}</For>
                </AvatarGroup>
            </button>
            <button
                type="button"
                style={{
                    width: '100%',
                    height: '100%',
                    'box-sizing': 'border-box',
                    display: open() ? 'none' : 'flex',
                    'flex-direction': 'column',
                    border: 'none',
                    background: 'var(--semi-color-tertiary-light-hover)',
                    'border-radius': '16px',
                    padding: '12px',
                    'text-align': 'left',
                    'font-family': 'inherit',
                    'font-size': 'inherit',
                    'line-height': 'inherit',
                    color: 'inherit',
                }}
                onClick={() => setOpen(true)}
            >
                <span
                    style={{
                        display: 'flex',
                        'align-items': 'center',
                        'justify-content': 'space-between',
                        padding: '5px 10px',
                        'column-gap': '10px',
                        color: 'var(--semi-color-text-1)',
                    }}
                >
                    <span style={{ 'font-size': '14px', 'font-weight': '500' }}>Source</span>
                    <IconChevronUp />
                </span>
                <span style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '10px', overflow: 'scroll', padding: '5px 10px' }}>
                    <For each={props.source}>
                        {(source) => (
                            <span
                                style={{
                                    display: 'flex',
                                    'flex-direction': 'column',
                                    'row-gap': '5px',
                                    'flex-basis': '150px',
                                    'flex-grow': '1',
                                    border: '1px solid var(--semi-color-border)',
                                    'border-radius': '12px',
                                    padding: '12px',
                                    'font-size': '12px',
                                }}
                            >
                                <span style={{ display: 'flex', 'column-gap': '5px', 'align-items': 'center' }}>
                                    <Avatar style={{ width: '16px', height: '16px', 'flex-shrink': '0' }} shape="square" src={source.avatar} alt="" />
                                    <span style={{ color: 'var(--semi-color-text-2)', 'text-overflow': 'ellipsis' }}>{source.title}</span>
                                </span>
                                <span
                                    style={{
                                        color: 'var(--semi-color-primary)',
                                        'font-size': '12px',
                                    }}
                                >
                                    {source.subTitle}
                                </span>
                                <span
                                    style={{
                                        display: '-webkit-box',
                                        '-webkit-box-orient': 'vertical',
                                        '-webkit-line-clamp': '3',
                                        'text-overflow': 'ellipsis',
                                        overflow: 'hidden',
                                        color: 'var(--semi-color-text-2)',
                                    }}
                                >
                                    {source.content}
                                </span>
                            </span>
                        )}
                    </For>
                </span>
            </button>
        </div>
    );
};

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            content: `This is a mock response`,
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    const renderChatBoxContent = (props: RenderContentProps) => (
        <div class={props.class}>
            <Show when={props.message?.source} keyed>
                {(source) => <SourceCard source={source} />}
            </Show>
            <MarkdownRender raw={typeof props.message?.content === 'string' ? props.message.content : ''} />
        </div>
    );

    return <Chat style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} chatBoxRenderConfig={{ renderChatBoxContent }} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} uploadProps={uploadProps} />;
}

import { Show, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderFullChatBoxProps as RenderFullChatBoxProps } from '@fibrous/semi-ai-solid';
import { Avatar } from '@fibrous/semi-ui-solid';

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
    {
        role: 'user',
        id: '2',
        createAt: 1715676751919,
        content: '介绍一下 semi design',
    },
    {
        role: 'assistant',
        id: '3',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统',
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const titleStyle = {
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'center',
    'column-gap': '10px',
    padding: '5px 0px',
    width: 'fit-content',
};

const renderFullChatBox = (props: RenderFullChatBoxProps) => (
    <div class={props.class}>
        <div
            style={{
                display: 'flex',
                'flex-direction': 'column',
                'row-gap': '4px',
                'align-items': props.message?.role === 'user' ? 'end' : '',
            }}
        >
            <Show when={props.message?.role !== 'user'}>
                <span style={titleStyle}>
                    <Avatar size="extra-small" shape="square" src={typeof props.role?.avatar === 'string' ? props.role.avatar : undefined} alt="" />
                    {props.defaultNodes?.title?.()}
                </span>
            </Show>
            <div style={{ width: 'fit-content' }}>{props.defaultNodes?.content?.()}</div>
            {props.defaultNodes?.action?.()}
        </div>
    </div>
);

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            content: `This is a mock response`,
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return <Chat chatBoxRenderConfig={{ renderFullChatBox }} style={commonOuterStyle} chats={chats()} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} roleConfig={roleInfo} uploadProps={uploadProps} />;
}

import { type JSX, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderInputAreaProps as RenderInputAreaProps } from '@fibrous/semi-ai-solid';
import { IconUpload } from '@fibrous/semi-icons-solid';
import { Button, Form, type FileItem, type FormApi, FormInput, FormUpload } from '@fibrous/semi-ui-solid';

interface InputValues {
    name?: string;
    file?: FileItem[];
}

const defaultMessage: Message[] = [
    {
        role: 'system',
        id: '1',
        createAt: 1715676751919,
        content: "Hello, I'm your AI assistant.",
    },
];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '500px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const inputStyle: JSX.CSSProperties = {
    display: 'flex',
    'flex-direction': 'column',
    border: '1px solid var(--semi-color-border)',
    margin: '8px 16px',
    'border-radius': '8px',
    padding: '8px',
};

function CustomInputRender(props: RenderInputAreaProps) {
    let api: FormApi<InputValues> | undefined;

    const onSubmit = () => {
        if (api) {
            const values = api.getValues();
            if ((values.name && values.name.length !== 0) || (values.file && values.file.length !== 0)) {
                props.onSend?.(values.name, values.file);
                api.reset();
            }
        }
    };

    return (
        <div style={inputStyle}>
            <Form getFormApi={(formApi) => (api = formApi)}>
                <strong>输入信息</strong>
                <FormInput field="name" label="名称（Input）" style={{ width: '250px' }} trigger="blur" />
                <FormUpload field="file" label="文档" action="https://api.semi.design/upload">
                    <Button icon={<IconUpload />} theme="light">
                        点击上传
                    </Button>
                </FormUpload>
            </Form>
            <Button style={{ width: 'fit-content' }} onClick={onSubmit}>
                提交
            </Button>
        </div>
    );
}

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            content: `This is a mock response`,
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return <Chat renderInputArea={CustomInputRender} style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} uploadProps={uploadProps} />;
}

import { createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message } from '@fibrous/semi-ai-solid';

const defaultMessage: Message[] = [
    {
        role: 'assistant',
        id: '1',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
    },
];

const hintsExample = ['告诉我更多', 'Semi Design 的组件有哪些？', '我能够通过 DSM 定制自己的主题吗？'];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);
    const [hints, setHints] = createSignal(hintsExample);

    const onHintClick = () => {
        setHints([]);
    };

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: '这是一条 mock 回复信息',
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
    };

    return <Chat hints={hints()} onHintClick={onHintClick} style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} onClear={() => setHints([])} uploadProps={uploadProps} />;
}

import { type JSX, createSignal } from 'solid-js';
import { Chat, type ChatMessage as Message, type ChatRenderHintBoxProps as RenderHintBoxProps } from '@fibrous/semi-ai-solid';
import { IconArrowRight } from '@fibrous/semi-icons-solid';

const defaultMessage: Message[] = [
    {
        role: 'assistant',
        id: '1',
        createAt: 1715676751919,
        content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统，你可以向我提问任何关于 Semi 的问题。',
    },
];

const hintsExample = ['告诉我更多', 'Semi Design 的组件有哪些？', '我能够通过 DSM 定制自己的主题吗？'];

const roleInfo = {
    user: {
        name: 'User',
        avatar: '/assets/docs-icon.png',
    },
    assistant: {
        name: 'Assistant',
        avatar: '/assets/placeholder/logo.svg',
    },
    system: {
        name: 'System',
        avatar: '/assets/placeholder/logo.svg',
    },
};

const commonOuterStyle = {
    border: '1px solid var(--semi-color-border)',
    'border-radius': '16px',
    height: '400px',
};

let id = 0;
function getId() {
    return `id-${id++}`;
}
const uploadProps = { action: 'https://api.semi.design/upload' };

const commonHintStyle: JSX.CSSProperties = {
    border: '1px solid var(--semi-color-border)',
    padding: '10px',
    'border-radius': '10px',
    background: 'none',
    color: 'var( --semi-color-text-1)',
    display: 'flex',
    'justify-content': 'space-between',
    'align-items': 'center',
    'text-align': 'left',
    cursor: 'pointer',
    'font-family': 'inherit',
    'font-size': '14px',
    'line-height': 'inherit',
};

const renderHintBox = (props: RenderHintBoxProps) => (
    <button type="button" style={commonHintStyle} onClick={() => props.onHintClick()}>
        {props.content}
        <IconArrowRight style={{ 'margin-left': '10px' }} />
    </button>
);

export default function ChatDemo() {
    const [chats, setChats] = createSignal<Message[]>(defaultMessage);
    const [hints, setHints] = createSignal(hintsExample);

    const onHintClick = () => {
        setHints([]);
    };

    const onMessageSend = () => {
        const newAssistantMessage: Message = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: '这是一条 mock 回复信息',
        };
        setTimeout(() => {
            setChats((list) => [...list, newAssistantMessage]);
        }, 200);
        setHints([]);
    };

    return <Chat renderHintBox={renderHintBox} hints={hints()} onHintClick={onHintClick} style={commonOuterStyle} chats={chats()} roleConfig={roleInfo} onChatsChange={(next) => setChats(next)} onMessageSend={onMessageSend} onClear={() => setHints([])} uploadProps={uploadProps} />;
}