Assistance.vue 组件文档

功能描述

Assistance.vue 是一个辅助组件，用于展示和管理多个助手（Assistants）。它通过 FloatButton 提供一个浮动按钮，点击后可以显示助手列表或直接选择一个助手进行交互。如果只有一个助手，则直接跳过选择步骤，进入对话界面。

属性（Props）

| 属性名 | 类型 | 是否必填 | 默认值 | 描述 | |--------------|----------|----------|--------|----------------------------------------------------------------------| | assistants | Array | 是 | - | 助手列表，每个助手包含 id、name、apiKey 和 apiUrl 等信息。 | | userName | String | 否 | '' | 用户名，默认为空字符串。 | | userAvatar | String | 否 | - | 用户头像图片路径，默认使用默认头像。 |

数据（Data）

| 数据名 | 类型 | 描述 | |--------------------|----------|----------------------------------------------------------------------| | position | Object | 对话框的位置信息，包括水平方向（xPosition）、垂直方向（yPosition）和偏移量（xPx、yPx）。 | | buttonPosition | Object | 浮动按钮的位置信息，同上。 | | visible | Boolean| 是否显示助手选择对话框。 | | dialogVisible | Boolean| 是否显示对话框。 | | activeAssistant | Object | 当前选中的助手对象，包含 id 和 name。 |

方法（Methods）

| 方法名 | 参数 | 描述 | |-------------------|-------------------------------|----------------------------------------------------------------------| | handMoveClose | - | 关闭对话框。 | | showDialog | event | 显示助手选择对话框或直接进入对话界面。 | | closeDialog | - | 关闭所有对话框。 | | chooseAssistant | assistant | 选择一个助手并进入对话界面。 | | changeAssistant | - | 切换助手时重新显示助手选择对话框。 |

子组件

• FloatButton：浮动按钮组件，用于触发助手选择或对话界面。
• AssistanceQuestionType：助手选择对话框，用于选择一个助手。
• AssistanceDialog：对话框组件，用于与选中的助手进行交互。

AssistanceDialog.vue 组件文档

功能描述

AssistanceDialog.vue 是一个对话框组件，用于与选中的助手进行交互。它包含头部（标题和关闭按钮）、聊天内容区域和输入框。

属性（Props）

| 属性名 | 类型 | 是否必填 | 默认值 | 描述 | |------------------|----------|----------|--------|----------------------------------------------------------------------| | userName | String | 否 | '' | 用户名，默认为空字符串。 | | userAvatar | String | 否 | '' | 用户头像图片路径，默认为空字符串。 | | assistants | Array | 是 | - | 助手列表，每个助手包含 id、name、apiKey 和 apiUrl 等信息。 | | assistantId | String | 是 | - | 当前选中的助手 ID。 | | assistantName | String | 是 | - | 当前选中的助手名称。 | | position | Object | 否 | - | 对话框的位置信息，包括水平方向（xPosition）、垂直方向（yPosition）和偏移量（xPx、yPx）。 | | apiUrl | String | 是 | - | API 请求的 URL。 | | apiKey | String | 是 | - | API 请求的密钥。 |

数据（Data）

| 数据名 | 类型 | 描述 | |--------------------------|----------|----------------------------------------------------------------------| | formattedDate | String | 格式化的时间戳。 | | historyQuestionsAndAnswers | Array | 历史问答记录，包含问题和答案的内容、时间戳、消息 ID 等信息。 | | currentQuestionContent | String | 当前输入的问题内容。 | | conversationId | String | 当前会话 ID。 | | question | String | 当前问题内容。 | | questionTimeStamp | String | 当前问题的时间戳。 | | message | String | 当前答案内容。 | | messageTimeStamp | String | 当前答案的时间戳。 | | isError | Boolean| 是否发生错误。 | | messageId | String | 当前消息 ID。 | | isLike | Boolean| 是否点赞。 | | isDislike | Boolean| 是否点踩。 | | canPause | Boolean| 是否可以暂停对话流。 | | pause | Boolean| 是否暂停对话流。 | | taskId | String | 当前任务 ID。 | | elapsedTime | String | 对话流的耗时。 | | totalTokens | Number | 总 token 数量。 | | isAnswering | Boolean| 是否正在回答问题。 | | eventSource | Object | SSE 事件源对象。 | | showLoading | Boolean| 是否显示加载状态。 |

方法（Methods）

| 方法名 | 参数 | 描述 | |-----------------------|-------------------------------|----------------------------------------------------------------------| | scrollToBottom | - | 滚动到聊天内容区域的底部。 | | addHistory | - | 将当前问题和答案添加到历史记录中。 | | resetData | - | 重置对话相关数据。 | | pauseSSE | - | 暂停对话流。 | | startSSE | currentQuestionContent | 开始对话流并发送问题。 | | doQuery | - | 发送请求并处理响应。 | | handleQueryResponse | response | 处理对话流的响应数据。 | | copyToClipboard | content | 将内容复制到剪贴板。 | | feedbacks | messageId, like, item | 提交反馈（点赞或点踩）。 | | cancelFeedbacks | messageId, dislike, item | 取消反馈（点踩）。 | | reChange | tempMessageId | 重新发送问题。 | | chooseAssistant | assistant | 选择一个助手并触发父组件的事件。 |

子组件

• AssistanceHeader：对话框头部，包含标题和关闭按钮。
• ChatContent：聊天内容区域，展示历史问答记录。
• InputFooter：输入框，用于输入问题并发送。

总结

• Assistance.vue 负责管理助手的选择和对话框的显示。
• AssistanceDialog.vue 负责与选中的助手进行交互，包括发送问题、接收答案、管理历史记录等功能。