AIAssentComponent 集成与页面适配说明

组件功能

• 支持 AI 助手弹窗模式（可拖拽、缩放、悬浮按钮触发）
• 支持嵌入模式（页面右侧 300px 区域平铺）
• 模式切换按钮可在两种模式间切换
• 支持通过 assentId、url 参数初始化

页面集成方式

1. 页面结构调整（推荐带历史同步的写法）

import React, { useState } from 'react';
import AIAssentComponent from '@/components/AIAssentComponent';

export default function IndexPage(props) {
  const [embedMode, setEmbedMode] = useState(false);
  const [history, setHistory] = useState([]);
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ flex: embedMode ? '0 0 calc(100vw - 300px)' : 1, transition: 'flex 0.3s', minWidth: 0 }}>
        {/* 页面主内容 */}
        {props.children}
      </div>
      {/* 嵌入模式下助手区域 */}
      <div style={{ width: embedMode ? 300 : 0, transition: 'width 0.3s', background: embedMode ? '#fff' : 'transparent', boxShadow: embedMode ? '0 2px 8px #0001' : 'none', overflow: 'hidden', height: '100vh' }}>
        {embedMode && (
          <AIAssentComponent
            assentId="demo-assistant-001"
            url=""
            mode="embed"
            visible={embedMode}
            history={history}
            onModeSwitch={(mode, newHistory) => {
              setEmbedMode(mode === 'embed');
              if (newHistory) setHistory(newHistory);
            }}
          />
        )}
      </div>
      {/* 浮窗模式下助手 */}
      {!embedMode && (
        <AIAssentComponent
          assentId="demo-assistant-001"
          url=""
          mode="float"
          visible={!embedMode}
          history={history}
          onModeSwitch={(mode, newHistory) => {
            setEmbedMode(mode === 'embed');
            if (newHistory) setHistory(newHistory);
          }}
        />
      )}
    </div>
  );
}

2. 模式切换通信

• 推荐通过全局状态管理（如 React Context、Redux）或自定义事件实现 embedMode 状态同步。
• 组件内部可通过 props、window 事件等方式通知父级切换模式。

3. 组件参数

• assentId：助手唯一标识，必填
• url：可选，后端接口地址

4. 适配建议

• 页面主内容区域需设置 flex，以便助手嵌入时自动收缩宽度
• 嵌入模式下助手区域宽度建议为 300px
• 保证页面高度为 100vh，避免助手区域溢出

如需自定义样式或交互，可参考 src/components/AIAssentComponent.tsx 进行扩展。