[RFC]助手式样板间

[vanndxh]

Summary

新增助手式样板间

Motivation

目前样板间模板比较稀少，且助手式（侧边栏/插件类）是比较常见的，所以考虑新增一个助手式样板间

Detailed Design

工作区

• 左上角 LOGO
• 右上角 AI Copilot 的开关
• 下方是 mock 的工作内容，考虑直接使用骨架屏

提问区

• 输入框：Sender
  • 文件上传：Attachment
  • 语音输入：Sender.allowSpeech
• [可选] 模型选择：Select，支持配置，模型调度可以使用 useXAgent
• 快捷操作
  • 了解升级
  • 组件资产

<Suggestion
  items={mockSuggestions}
  onSelect={(itemVal) => {
    setInputValue(`[${itemVal}]:`);
  }}
>
  {({ onTrigger, onKeyDown }) => {
    return (
      <Sender
        loading={loading}
        value={inputValue}
        onChange={(v) => {
          if (v === '/') {
            onTrigger();
          } else if (!v) {
            onTrigger(false);
          }
          setInputValue(v);
        }}
        onSubmit={() => {
          handleUserSubmit(inputValue);
          setInputValue('');
        }}
        onCancel={() => {
          setLoading(false);
        }}
        allowSpeech
        placeholder="问我问题或输入 / 使用技能"
        onKeyDown={onKeyDown}
        header={
          <Sender.Header
            title="上传文件"
            styles={{
              content: {
                padding: 0,
              },
            }}
            open={attachmentsOpen}
            onOpenChange={setAttachmentsOpen}
            forceRender
          >
            <Attachments
              ref={attachmentsRef}
              beforeUpload={() => false}
              items={files}
              onChange={({ fileList }) => setFiles(fileList)}
              placeholder={(type) =>
                type === 'drop'
                  ? {
                      title: 'Drop file here',
                    }
                  : {
                      icon: <CloudUploadOutlined />,
                      title: 'Upload files',
                      description: 'Click or drag files to this area to upload',
                    }
              }
            />
          </Sender.Header>
        }
        prefix={
          <Button
            type="text"
            icon={<LinkOutlined />}
            onClick={() => setAttachmentsOpen(!attachmentsOpen)}
          />
        }
        onPasteFile={(_, files) => {
          for (const file of files) {
            attachmentsRef.current?.upload(file);
          }
          setAttachmentsOpen(true);
        }}
      />
    );
  }}
</Suggestion>

欢迎语

• 上方使用 Welcome
• 下方自定义部分快捷提问，没有现成组件，需要自己完成样式，可以考虑集成到 Welcome 组件中

<>
  <Welcome
    variant="borderless"
    title="👋 Hello, I'm Ant Design X"
    description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
    className={styles.chatWelcome}
  />
  <span style={{ color: 'rgba(0, 0, 0, 0.7)', marginTop: 20 }}>我可以帮您：</span>
  {mockQuestions.map((i) => (
    <div className={styles.question} key={i} onClick={() => handleUserSubmit(i)}>
      {i}
    </div>
  ))}
</>

消息区

• 消息渲染：Bubble
• 重新生成：点击后再次生成，且允许翻页
• 复制：复制生成的内容
• 点赞/点踩：维护一个点赞状态

<Bubble.List
  items={messages?.map((i) => i.message)}
  roles={{
    ai: {
      placement: 'start',
      typing: { step: 5, interval: 20 },
      footer: loading ? null : (
        <div style={{ display: 'flex' }}>
          <Button type="text" size="small">
            <ReloadOutlined />
          </Button>
        </div>
      ),
    },
    user: {
      placement: 'end',
      styles: {
        content: {
          background: '#ffffff',
          boxShadow:
            '0px 2px 4px 0px #0000000a, 0px 0px 6px -4px #0000000a, 0px 0px 2px 0px #0000000d',
        },
      },
    },
  }}
/>

顶部操作区

• 标题：icon + AI Copilot
• 新建会话
  • 若已经存在，提示 当前已是新对话
• 历史记录：Conversations
• 关闭按钮

Example Usage

整个就是样板间，请自行参考源码使用完整模板

Hints

• 样板间开发可以用到以下 Ant Design X 的组件：Sender, Attachment, useXAgent, Welcome, Bubble, Conversations