@opentiny/tiny-robot-cli 0.4.2 → 0.5.2-alpha.11

package/templates/chat/src/components/WindowHeader.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { HistoryMenuItem } from '@opentiny/tiny-robot'
+import { TrHistory, TrIconButton } from '@opentiny/tiny-robot'
+import { IconClose, IconEnterFullScreen, IconHistory, IconNewSession } from '@opentiny/tiny-robot-svgs'
+import { h } from 'vue'
+import type { ChatHistoryItem } from '@opentiny/tiny-robot-chat'
+import type { DisplayMode } from '../composables/useWindow'
+
+const props = defineProps<{
+  displayMode: DisplayMode
+  showHistory: boolean
+  historyData: readonly ChatHistoryItem[]
+  activeConversationId?: string
+}>()
+
+const emit = defineEmits<{
+  newSession: []
+  selectHistory: [item: ChatHistoryItem]
+  renameHistory: [title: string, item: ChatHistoryItem]
+  historyAction: [action: HistoryMenuItem, item: ChatHistoryItem]
+  'update:showHistory': [value: boolean]
+  changeMode: [mode: DisplayMode]
+  close: []
+}>()
+
+const IconFloatWindow = h(
+  'svg',
+  {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 16,
+    height: 16,
+    fill: 'none',
+    viewBox: '0 0 16 16',
+    'aria-hidden': 'true',
+  },
+  [
+    h('path', {
+      fill: '#191919',
+      'fill-rule': 'evenodd',
+      d: 'M6.19 14.5H4q-.285 0-.54-.06c-.15-.04-.3-.08-.44-.14s-.27-.13-.4-.22c-.14-.09-.27-.2-.39-.32s-.23-.25-.32-.39c-.09-.13-.16-.26-.22-.4s-.1-.29-.14-.44c-.04-.17-.05-.35-.05-.53V4c0-.19.01-.37.05-.54.04-.15.08-.3.14-.44s.13-.27.22-.4c.09-.14.2-.27.32-.39s.25-.23.39-.32c.13-.09.26-.16.4-.22s.29-.1.44-.14c.17-.04.35-.05.54-.05h8c.18 0 .36.01.53.05.15.04.3.08.44.14s.27.13.4.22c.14.09.27.2.39.32s.23.25.32.39c.09.13.16.26.22.4s.1.29.14.44q.06.255.06.54v2.15c0 .28-.22.5-.5.5s-.5-.22-.5-.5V4c0-.12-.02-.23-.04-.35-.02-.08-.05-.16-.08-.24a2 2 0 0 0-.13-.23 1.5 1.5 0 0 0-.19-.25 1.5 1.5 0 0 0-.25-.19c-.07-.05-.15-.09-.23-.13a2 2 0 0 0-.24-.08c-.12-.02-.23-.03-.34-.03H4c-.12 0-.23.01-.35.03-.08.02-.16.05-.24.08-.08.04-.16.08-.23.13a1.5 1.5 0 0 0-.25.19 1.5 1.5 0 0 0-.19.25c-.05.07-.09.15-.13.23-.03.08-.06.16-.08.24-.02.12-.03.23-.03.35v8c0 .11.01.22.03.34.02.08.05.16.08.24.04.08.08.16.13.23.05.09.12.17.19.25.08.07.16.14.25.19.07.05.15.09.23.13.08.03.16.06.24.08.12.02.23.04.35.04h2.19c.28 0 .5.22.5.5s-.22.5-.5.5m7.12-6.97c-.1-.02-.21-.03-.31-.03H9c-.11 0-.22.01-.32.03-.09.02-.18.05-.27.08-.09.04-.17.08-.24.13-.09.06-.16.12-.24.19-.07.08-.13.15-.19.24-.05.07-.09.15-.13.24-.03.09-.06.18-.08.27-.02.1-.03.21-.03.32v4c0 .1.01.21.03.31.02.09.05.18.08.27.04.09.08.17.13.24.06.09.12.16.19.24.08.07.15.13.24.19.07.05.15.09.24.13.09.03.18.06.27.08.1.02.21.04.32.04h4c.1 0 .21-.02.31-.04.09-.02.18-.05.27-.08.09-.04.17-.08.24-.13.09-.06.16-.12.24-.19.07-.08.13-.15.19-.24.05-.07.09-.15.13-.24.03-.09.06-.18.08-.27.02-.1.04-.21.04-.31V9c0-.11-.02-.22-.04-.32-.02-.09-.05-.18-.08-.27-.04-.09-.08-.17-.13-.24-.06-.09-.12-.16-.19-.24-.08-.07-.15-.13-.24-.19-.07-.05-.15-.09-.24-.13-.09-.03-.18-.06-.27-.08M9 8.5h4c.06 0 .13.01.19.03.06.03.11.06.16.11s.08.1.11.16c.02.06.04.13.04.2v4c0 .06-.02.13-.04.19-.03.06-.06.11-.11.16s-.1.08-.16.11c-.06.02-.13.04-.19.04H9c-.07 0-.14-.02-.2-.04a.6.6 0 0 1-.16-.11.6.6 0 0 1-.11-.16.6.6 0 0 1-.03-.19V9c0-.07.01-.14.03-.2.03-.06.06-.11.11-.16s.1-.08.16-.11c.06-.02.13-.03.2-.03',
+    }),
+  ],
+)
+</script>
+
+<template>
+  <div class="chat-add-header">
+    <h1 class="chat-add-header__title">OpenTiny NEXT</h1>
+    <div class="chat-add-header__actions">
+      <TrIconButton :icon="IconNewSession" size="28" svg-size="20" title="新会话" @click="emit('newSession')" />
+      <span class="chat-add-header__history-trigger">
+        <TrIconButton
+          :icon="IconHistory"
+          size="28"
+          svg-size="20"
+          title="历史会话"
+          @click="emit('update:showHistory', !props.showHistory)"
+        />
+        <div v-if="props.showHistory" class="chat-add-header__history-panel">
+          <div class="chat-add-header__history-head">
+            <h2>历史对话</h2>
+            <TrIconButton
+              :icon="IconClose"
+              size="28"
+              svg-size="20"
+              title="关闭历史对话"
+              @click="emit('update:showHistory', false)"
+            />
+          </div>
+          <!-- @vue-generic {ChatHistoryItem} -->
+          <TrHistory
+            class="chat-add-header__history"
+            :selected="props.activeConversationId"
+            :search-bar="true"
+            :data="props.historyData as ChatHistoryItem[]"
+            @item-title-change="(title, item) => emit('renameHistory', title, item)"
+            @item-click="(item) => emit('selectHistory', item)"
+            @item-action="(action, item) => emit('historyAction', action, item)"
+          />
+        </div>
+      </span>
+      <TrIconButton
+        v-if="props.displayMode === 'fullscreen'"
+        :icon="IconFloatWindow"
+        size="28"
+        svg-size="20"
+        title="切换为悬浮窗口"
+        aria-label="切换为悬浮窗口"
+        @click="emit('changeMode', 'floating')"
+      />
+      <TrIconButton
+        v-if="props.displayMode !== 'fullscreen'"
+        :icon="IconEnterFullScreen"
+        size="28"
+        svg-size="20"
+        title="切换为全屏模式"
+        aria-label="切换为全屏模式"
+        @click="emit('changeMode', 'fullscreen')"
+      />
+      <TrIconButton :icon="IconClose" size="28" svg-size="20" title="关闭" @click="emit('close')" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-add-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  min-width: 0;
+  height: 56px;
+  padding: 0 16px;
+  background: var(--tr-layout-bg-default);
+}
+.chat-add-header__title {
+  overflow: hidden;
+  margin: 0;
+  color: var(--tr-text-primary);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-add-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+.chat-add-header__history-trigger {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+.chat-add-header__history-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: var(--tr-z-index-popover);
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 12px;
+  width: 320px;
+  height: 560px;
+  padding: 16px;
+  overflow: hidden;
+  border: 1px solid var(--tr-border-color-default);
+  border-radius: 12px;
+  background: var(--tr-container-bg-default);
+  box-shadow: var(--tr-shadow-sm);
+}
+.chat-add-header__history-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.chat-add-header__history-head h2 {
+  margin: 0;
+  color: var(--tr-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+}
+.chat-add-header__history {
+  min-height: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.chat-add-header__history {
+  --tr-history-item-selected-bg: var(--tr-history-item-hover-bg);
+  --tr-history-item-selected-color: var(--tr-color-primary);
+  --tr-history-item-space-y: 4px;
+}
+@media (max-width: 640px) {
+  .chat-add-header {
+    height: 52px;
+    padding: 0 10px;
+  }
+  .chat-add-header__history-panel {
+    position: fixed;
+    top: 52px;
+    right: 8px;
+    left: 8px;
+    width: auto;
+    height: min(560px, calc(100dvh - 68px));
+  }
+}
+</style>

package/templates/chat/src/composables/useWindow.ts

@@ -0,0 +1,83 @@
+import type { LayoutFloatingOptions, LayoutFloatingState } from '@opentiny/tiny-robot'
+import { useEventListener, useWindowSize } from '@vueuse/core'
+import { computed, shallowRef, watch } from 'vue'
+
+export type DisplayMode = 'floating' | 'fullscreen'
+
+export function useWindow() {
+  const show = shallowRef(false)
+  const displayMode = shallowRef<DisplayMode>('floating')
+  const floatingState = shallowRef<LayoutFloatingState>({
+    placement: 'center',
+    offsetX: 24,
+    offsetY: 24,
+    width: 640,
+    height: 760,
+  })
+  const restoreFloatingState = shallowRef<LayoutFloatingState | null>(null)
+  const { width, height } = useWindowSize()
+
+  const floatingOptions = computed<LayoutFloatingOptions>(() => ({
+    draggable: displayMode.value === 'floating',
+    resizable: displayMode.value === 'floating',
+    minWidth: displayMode.value === 'floating' ? 360 : undefined,
+    minHeight: displayMode.value === 'floating' ? 480 : undefined,
+  }))
+
+  const layoutStyle = computed(() => ({
+    '--tr-layout-main-min-width': '0',
+    '--tr-layout-floating-radius': displayMode.value === 'floating' && width.value > 640 ? '12px' : '0px',
+    '--tr-layout-floating-shadow':
+      displayMode.value === 'floating' && width.value > 640 ? '0 18px 48px rgb(0 0 0 / 18%)' : 'none',
+  }))
+
+  function getFullscreenState(): LayoutFloatingState {
+    return { placement: 'top-left', offsetX: 0, offsetY: 0, width: width.value, height: height.value }
+  }
+
+  function setDisplayMode(mode: DisplayMode): void {
+    if (mode === displayMode.value) return
+    if (displayMode.value === 'floating') restoreFloatingState.value = { ...floatingState.value }
+    displayMode.value = mode
+    if (mode === 'floating') {
+      if (restoreFloatingState.value) floatingState.value = { ...restoreFloatingState.value }
+      restoreFloatingState.value = null
+    } else {
+      floatingState.value = getFullscreenState()
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && displayMode.value === 'fullscreen') setDisplayMode('floating')
+  }
+
+  useEventListener('keydown', handleEscape)
+  watch(
+    [displayMode, width, height],
+    () => {
+      if (displayMode.value === 'fullscreen') floatingState.value = getFullscreenState()
+    },
+    { immediate: true },
+  )
+
+  function open(): void {
+    show.value = true
+  }
+
+  function close(): void {
+    show.value = false
+  }
+
+  return {
+    show,
+    displayMode,
+    floatingState,
+    floatingOptions,
+    layoutStyle,
+    setDisplayMode,
+    restoreFloatingState,
+    handleEscape,
+    open,
+    close,
+  }
+}

package/templates/chat/src/config/chat-runtime.ts

@@ -0,0 +1,57 @@
+import type { ChatMcpServers, ChatProviderConfig } from '@opentiny/tiny-robot-chat'
+
+export interface McpExample {
+  id: string
+  title: string
+  request: string
+}
+
+export const mcpExamples: McpExample[] = [
+  { id: 'weather', title: '查询北京天气', request: '查询北京今天的天气，并给出出行建议' },
+  { id: 'coffee', title: '查询附近咖啡店', request: '查询我附近的咖啡店，并按距离排序' },
+  { id: 'exchange-rate', title: '获取当前汇率', request: '查询人民币兑美元的当前汇率' },
+]
+
+export const mcpServers: ChatMcpServers = [
+  {
+    id: 'amap-maps',
+    name: '高德地图',
+    description: '覆盖地图、导航、地理编码、天气、路径规划、距离测量、关键词搜索和周边搜索等地理信息服务。',
+    baseUrl: import.meta.env.VITE_AMAP_MCP_URL?.trim() || 'https://dashscope.aliyuncs.com/api/v1/mcps/amap-maps/mcp',
+    icon: 'https://img.alicdn.com/imgextra/i4/O1CN01iPPabT1EGRN6uatHP_!!6000000000324-0-tps-512-512.jpg',
+    headers: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim()
+      ? { Authorization: `Bearer ${import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY.trim()}` }
+      : undefined,
+  },
+  {
+    id: 'model-context-protocol-mcp',
+    name: 'Model Context Protocol MCP',
+    description: 'MCP Server',
+    baseUrl: '/modelcontextprotocol-mcp',
+    icon: '/modelcontextprotocol.png',
+    installed: true,
+  },
+]
+
+export const modelProviders: ChatProviderConfig[] = [
+  {
+    type: 'qwen',
+    label: 'DashScope',
+    apiUrl: import.meta.env.VITE_QWEN_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim(),
+    models: [
+      { id: 'qwen3.7-flash', label: 'Qwen3.7 Flash', capabilities: { thinking: true, search: true } },
+      { id: 'qwen3.7-plus', label: 'Qwen3.7 Plus', capabilities: { thinking: true, search: true } },
+      { id: 'qwen3.7-max', label: 'Qwen3.7 Max', capabilities: { thinking: true, search: true } },
+    ],
+  },
+  {
+    type: 'deepseek',
+    apiUrl: import.meta.env.VITE_DEEPSEEK_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_DEEPSEEK_API_KEY?.trim(),
+    models: [
+      { id: 'deepseek-v4-flash', label: 'DeepSeek V4 Flash', capabilities: { thinking: true } },
+      { id: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro', capabilities: { thinking: true } },
+    ],
+  },
+]

package/templates/chat/src/config/chat-ui.ts

@@ -0,0 +1,289 @@
+import type { LayoutFloatingOptions } from '@opentiny/tiny-robot'
+import type { ChatSenderOptions, ChatUIOptions } from '@opentiny/tiny-robot-chat'
+import type { TemplateItem } from '@opentiny/tiny-robot'
+import { IconAi, IconEdit, IconHistory, IconNewSession, IconSparkles, IconUser } from '@opentiny/tiny-robot-svgs'
+import { h, type CSSProperties } from 'vue'
+
+export interface ChatUiConfigOptions {
+  floatingOptions: Readonly<LayoutFloatingOptions>
+  templateExtensions: NonNullable<ChatSenderOptions['extensions']>
+}
+
+export interface ChatMenuItem {
+  id: string
+  title: string
+  icon: unknown
+  action: 'mcp' | 'template' | 'history' | 'new-session' | 'mode'
+}
+
+export const composerMenus: ChatMenuItem[] = [
+  { id: 'quick-query', title: '常用查询', icon: IconSparkles, action: 'mcp' },
+  { id: 'templates', title: '模板', icon: IconEdit, action: 'template' },
+]
+
+export const windowMenus: ChatMenuItem[] = [
+  { id: 'new-session', title: '新会话', icon: IconNewSession, action: 'new-session' },
+  { id: 'history', title: '历史会话', icon: IconHistory, action: 'history' },
+  { id: 'mode', title: '窗口模式', icon: IconSparkles, action: 'mode' },
+]
+
+export interface PromptItemData {
+  label: string
+  description: string
+  emoji: string
+  badge?: string
+}
+
+export const PROMPT_ITEMS_DATA: PromptItemData[] = [
+  {
+    label: '日常助理场景',
+    description: '今天需要我帮你安排日程，规划旅行，还是起草一封邮件？',
+    emoji: '🧠',
+    badge: 'NEW',
+  },
+  {
+    label: '学习/知识型场景',
+    description: '有什么想了解的吗？可以是"Vue3 和 React 的区别"！',
+    emoji: '🤔',
+  },
+  {
+    label: '创意生成场景',
+    description: '想写段文案、起个名字，还是来点灵感？',
+    emoji: '✨',
+  },
+  {
+    label: 'MCP 工具调用',
+    description: '搜索：北京天气（输入「搜索」「MCP」「工具」等关键词可触发模拟 MCP 工具调用）',
+    emoji: '🔧',
+  },
+]
+
+export const prompts = PROMPT_ITEMS_DATA
+
+export interface TemplateSuggestionItem {
+  id: string
+  text: string
+  template: TemplateItem[]
+}
+
+export const templateSuggestions: TemplateSuggestionItem[] = [
+  {
+    id: 'write',
+    text: '帮我写作',
+    template: [
+      { id: 'write-prefix', type: 'text', content: '请帮我撰写一篇' },
+      {
+        id: 'write-kind',
+        type: 'select',
+        content: '',
+        placeholder: '文章类型',
+        options: [
+          { label: '公告', value: '公告' },
+          { label: '方案', value: '方案' },
+          { label: '邮件', value: '邮件' },
+        ],
+      },
+      { id: 'write-topic-prefix', type: 'text', content: '，主题是' },
+      { id: 'write-topic', type: 'block', content: '主题' },
+      { id: 'write-tone-prefix', type: 'text', content: '，语气是' },
+      {
+        id: 'write-tone',
+        type: 'select',
+        content: '',
+        placeholder: '语气类型',
+        options: [
+          { label: '正式', value: '正式' },
+          { label: '轻松', value: '轻松' },
+          { label: '专业', value: '专业' },
+        ],
+      },
+      { id: 'write-description-prefix', type: 'text', content: '，具体内容是' },
+      { id: 'write-description', type: 'block', content: '详细描述' },
+    ],
+  },
+  {
+    id: 'translate',
+    text: '翻译',
+    template: [
+      { id: 'translate-source-prefix', type: 'text', content: '请将以下' },
+      {
+        id: 'translate-source-language',
+        type: 'select',
+        content: '',
+        placeholder: '源语言',
+        options: [
+          { label: '中文', value: '中文' },
+          { label: '英文', value: '英文' },
+          { label: '日语', value: '日语' },
+        ],
+      },
+      { id: 'translate-content-prefix', type: 'text', content: '内容翻译成' },
+      {
+        id: 'translate-target-language',
+        type: 'select',
+        content: '',
+        placeholder: '目标语言',
+        options: [
+          { label: '中文', value: '中文' },
+          { label: '英文', value: '英文' },
+          { label: '日语', value: '日语' },
+        ],
+      },
+      { id: 'translate-content-suffix', type: 'text', content: '，内容是' },
+      { id: 'translate-content', type: 'block', content: '需要翻译的内容' },
+    ],
+  },
+  {
+    id: 'code-review',
+    text: '代码审查',
+    template: [
+      { id: 'code-review-prefix', type: 'text', content: '请帮我审查以下' },
+      {
+        id: 'code-review-language',
+        type: 'select',
+        content: '',
+        placeholder: '代码语言',
+        options: [
+          { label: 'JavaScript', value: 'JavaScript' },
+          { label: 'TypeScript', value: 'TypeScript' },
+          { label: 'Python', value: 'Python' },
+        ],
+      },
+      { id: 'code-review-focus-prefix', type: 'text', content: '代码，关注' },
+      {
+        id: 'code-review-focus',
+        type: 'select',
+        content: '',
+        placeholder: '关注方向',
+        options: [
+          { label: '性能', value: '性能' },
+          { label: '安全', value: '安全' },
+          { label: '可读性', value: '可读性' },
+        ],
+      },
+      { id: 'code-review-content-prefix', type: 'text', content: '方面，代码如下：' },
+      { id: 'code-review-content', type: 'block', content: '代码内容' },
+    ],
+  },
+  {
+    id: 'email-compose',
+    text: '写邮件',
+    template: [
+      { id: 'email-compose-prefix', type: 'text', content: '请帮我起草一封' },
+      {
+        id: 'email-compose-type',
+        type: 'select',
+        content: '',
+        placeholder: '邮件类型',
+        options: [
+          { label: '正式', value: '正式' },
+          { label: '非正式', value: '非正式' },
+        ],
+      },
+      { id: 'email-compose-recipient-prefix', type: 'text', content: '邮件，发送给' },
+      { id: 'email-compose-recipient', type: 'block', content: '收件人角色' },
+      { id: 'email-compose-subject-prefix', type: 'text', content: '，主题是' },
+      { id: 'email-compose-subject', type: 'block', content: '邮件主题' },
+      { id: 'email-compose-content-prefix', type: 'text', content: '，内容是关于' },
+      { id: 'email-compose-content', type: 'block', content: '邮件内容' },
+    ],
+  },
+  {
+    id: 'interview-questions',
+    text: '面试问题',
+    template: [
+      { id: 'interview-questions-prefix', type: 'text', content: '请为' },
+      { id: 'interview-questions-role', type: 'block', content: '岗位名称' },
+      { id: 'interview-questions-skill-prefix', type: 'text', content: '岗位，针对' },
+      { id: 'interview-questions-skill', type: 'block', content: '技能领域' },
+      { id: 'interview-questions-count-prefix', type: 'text', content: '方向，设计' },
+      {
+        id: 'interview-questions-count',
+        type: 'select',
+        content: '',
+        placeholder: '问题数量',
+        options: [
+          { label: '3', value: '3' },
+          { label: '5', value: '5' },
+          { label: '10', value: '10' },
+        ],
+      },
+      { id: 'interview-questions-difficulty-prefix', type: 'text', content: '个难度为' },
+      {
+        id: 'interview-questions-difficulty',
+        type: 'select',
+        content: '',
+        placeholder: '岗位难度',
+        options: [
+          { label: '简单', value: '简单' },
+          { label: '中等', value: '中等' },
+          { label: '困难', value: '困难' },
+        ],
+      },
+      { id: 'interview-questions-suffix', type: 'text', content: '的面试问题' },
+    ],
+  },
+]
+
+export interface TemplateCategory {
+  id: string
+  title: string
+  items: TemplateSuggestionItem[]
+}
+
+export const templateCategories: TemplateCategory[] = [
+  { id: 'writing', title: '写作表达', items: [templateSuggestions[0]] },
+  { id: 'language', title: '语言处理', items: [templateSuggestions[1]] },
+  { id: 'engineering', title: '研发协作', items: [templateSuggestions[2]] },
+  { id: 'communication', title: '工作沟通', items: [templateSuggestions[3]] },
+  { id: 'growth', title: '人才发展', items: [templateSuggestions[4]] },
+]
+
+const promptItems = PROMPT_ITEMS_DATA.map((item) => ({
+  ...item,
+  icon: h('span', { style: { fontSize: '18px' } as CSSProperties }, item.emoji) as never,
+}))
+
+export function createChatUi(options: ChatUiConfigOptions): ChatUIOptions {
+  return {
+    history: false,
+    welcome: {
+      title: 'TinyRobot',
+      description: '您好，我是TinyRobot，您专属的 AI 智能专家',
+      icon: h(IconAi, { style: { fontSize: '48px' } }) as never,
+    },
+    prompts: { items: promptItems, wrap: true, itemClass: 'prompt-item' },
+    bubble: {
+      autoScroll: true,
+      bubbleList: {
+        roleConfigs: {
+          assistant: { placement: 'start', avatar: h(IconAi, { style: { fontSize: '32px' } }) as never },
+          user: { placement: 'end', avatar: h(IconUser, { style: { fontSize: '32px' } }) as never },
+          system: { hidden: true },
+        },
+      },
+    },
+    layout: {
+      heightMode: 'parent',
+      leftAside: false,
+      rightAside: {
+        mode: 'drawer',
+        width: 400,
+        defaultOpen: false,
+      },
+      surface: { mode: 'floating', floatingOptions: options.floatingOptions },
+      emptyState: 'center',
+      composer: { welcome: 'footer' },
+      contentMaxWidth: 1280,
+      panelPadding: 0,
+      panelGap: 0,
+    } as ChatUIOptions['layout'],
+    sender: {
+      mode: 'multiple',
+      clearable: true,
+      showWordLimit: true,
+      maxLength: 2000,
+      extensions: options.templateExtensions,
+    },
+  }
+}