@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/message-input.md

@@ -1,114 +1,52 @@
-AI 模型必须遵守以下**硬性限制**。
-**必须使用默认文本对齐方式：** 消息输入区的文本默认左对齐。
-
 ## 概述
 
 MessageInput 是一个功能完整的消息输入组件，专为 Vue3 应用设计，提供了文本编辑、表情选择、文件附件、发送按钮等核心聊天输入功能。该组件支持丰富的自定义选项，包括输入行为配置、工具栏定制、组件替换和插槽扩展，能够满足不同聊天场景的个性化需求。
 
-## 基础用法
-
-```ts
-<script>
-import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
-</script>
-
-<template>
-  <MessageInput />
-</template>
-```
-
 ## Props 配置
 
-| 字段 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| autoFocus | boolean | true | 是否自动聚焦到输入框 |
-| disabled | boolean | false | 是否禁用输入组件 |
-| hideSendButton | boolean | false | 是否隐藏发送按钮 |
-| placeholder | string | '' | 输入框占位符文本 |
-| attachmentPickerMode | 'collapsed' \| 'expanded' | 'collapsed' | 附件选择器显示模式 |
-| actions | MessageInputActions | ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'] | 工具栏操作按钮配置 |
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|autoFocus|boolean|true|是否自动聚焦到输入框|
+|disabled|boolean|false|是否禁用输入组件|
+|placeholder|string|''|输入框占位符文本|
+|actions|MessageInputActions|['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker']|工具栏操作按钮配置|
 
 ## Slots 配置
 
-| 字段 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| headerToolbar | () => VNode[] | undefined | 头部工具栏插槽 |
-| footerToolbar | () => VNode[] | undefined | 底部工具栏插槽 |
-| leftInline | () => VNode[] | undefined | 左侧内联插槽 |
-| rightInline | () => VNode[] | undefined | 右侧内联插槽 |
-| inputPrefix | () => VNode[] | undefined | 输入框前缀插槽 |
-| inputSuffix | () => VNode[] | undefined | 输入框后缀插槽 |
-| TextEditor | Component \| null | null | 自定义文本编辑器组件配置 |
-
-### 类型定义
-``` typescript
-type BuiltInAction =
-  | 'EmojiPicker'
-  | 'ImagePicker'
-  | 'FilePicker'
-  | 'VideoPicker'
-  | 'AttachmentPicker';
-
-export type CustomAction = {
-  key: string;
-  label?: string | undefined;
-  component?: Component | undefined;
-  className?: string | undefined;
-  style?: CSSProperties | undefined;
-  iconSize?: number | undefined;
-};
-
-export type MessageInputActions = Array<BuiltInAction | CustomAction>;
-
-export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
-
-export interface MessageInputSlots {
-  headerToolbar?: () => VNode[];
-  footerToolbar?: () => VNode[];
-  leftInline?: () => VNode[];
-  rightInline?: () => VNode[];
-  inputPrefix?: () => VNode[];
-  inputSuffix?: () => VNode[];
-  textEditor?: () => VNode[];
-}
-
-// MessageInputProps 接口定义
-export interface MessageInputProps {
-  autoFocus?: boolean;
-  disabled?: boolean;
-  hideSendButton?: boolean;
-  placeholder?: string;
-  attachmentPickerMode?: MessageInputAttachmentPickerMode;
-  actions?: MessageInputActions;
-  slots?: MessageInputSlots;
-  TextEditor?: Component | null;
-}
-```
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|headerToolbar|() => VNode[]|undefined|头部工具栏插槽|
+|footerToolbar|() => VNode[]|undefined|底部工具栏插槽|
+|leftInline|() => VNode[]|undefined|左侧内联插槽|
+|rightInline|() => VNode[]|undefined|右侧内联插槽|
+|inputPrefix|() => VNode[]|undefined|输入框前缀插槽|
+|inputSuffix|() => VNode[]|undefined|输入框后缀插槽|
+|TextEditor|Component \| null|null|自定义文本编辑器组件配置|
 
 ## 自定义功能详解
 
 ### autoFocus
-- 类型：boolean
+- 类型：`boolean`
 
 - 详细说明：autoFocus 用于设置是否在组件挂载时自动聚焦到输入框，默认值为 `true`。
 
 ### disabled
-- 类型：boolean
+- 类型：`boolean`
 
 - 详细说明：disabled 用于设置是否禁用整个输入组件，包括文本输入和所有操作按钮，默认值为 `false`。
 
 ### hideSendButton
-- 类型：boolean
+- 类型：`boolean`
 
 - 详细说明：hideSendButton 用于设置是否隐藏发送按钮，适用于需要自定义发送触发方式的场景，默认值为 `false`。
 
 ### placeholder
-- 类型：string
+- 类型：`string`
 
 - 详细说明：placeholder 用于设置输入框的占位符文本，默认值为空字符串。
 
 ### attachmentPickerMode
-- 类型：'collapsed' | 'expanded'
+- 类型：`'collapsed' | 'expanded'`
 
 - 详细说明：attachmentPickerMode 用于设置附件选择器的显示模式，默认值为 `'collapsed'`。
 
@@ -117,10 +55,37 @@ export interface MessageInputProps {
   - **expanded**：展开模式，直接显示所有选项。
 
 ### actions
-- 类型：MessageInputActions
+- 类型：`MessageInputActions`
 
 - 详细说明：actions 用于配置工具栏中显示的操作按钮，默认值为 `['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker']`。
 
+- 注意：
+
+  - 每一个 BuiltInAction 都支持默认插槽从而改变 Trigger 的 UI 展示。更加灵活的输入工具自定义建议使用 `headerToolbar` 插槽。
+
+  - 显示音视频通话的按钮并不意味着可以发起通话，发起音视频通话的前提是集成了 CallKit，集成 CallKit 可以参考 集成 TUICallKit。
+
+      ``` typescript
+      type MessageInputActions = Array<BuiltInAction | CustomAction>;
+
+      type BuiltInAction =
+        | 'EmojiPicker'
+        | 'ImagePicker'
+        | 'FilePicker'
+        | 'VideoPicker'
+        | 'AudioCallPicker'
+        | 'VideoCallPicker';
+
+      type CustomAction = {
+        key: string;
+        label?: string | undefined;
+        component?: Component | undefined;
+        className?: string | undefined;
+        style?: CSSProperties | undefined;
+        iconSize?: number | undefined;
+      };
+      ```
+
 #### 示例1：自定义工具栏按钮顺序
 ``` typescript
 <template>
@@ -128,10 +93,10 @@ export interface MessageInputProps {
 </template>
 
 <script lang="ts" setup>
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
+import { MessageInput } from '@tencentcloud/chat-uikit-vue3';
 
-// 自定义按钮顺序：文件、图片、视频、表情
-const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
+// 自定义按钮顺序：文件、图片、视频、语音通话、视频通话
+const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'AudioCallPicker', 'VideoCallPicker'];
 </script>
 ```
 
@@ -143,7 +108,7 @@ const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'
 
 <script lang="ts" setup>
 import { defineComponent, h } from 'vue';
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
+import { MessageInput } from '@tencentcloud/chat-uikit-vue3';
 
 // 自定义位置分享按钮组件
 const LocationPicker = defineComponent({
@@ -182,11 +147,12 @@ const customActions = [
     label: 'Location',
     component: LocationPicker,
   },
-  'AttachmentPicker',
 ];
 </script>
 ```
 
+示例效果：
+
 #### 示例3：客服系统快捷回复
 ``` typescript
 <template>
@@ -195,14 +161,13 @@ const customActions = [
 
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
-import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
+import { MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-vue3';
 
 // 快捷回复组件
 const QuickReplyPicker = defineComponent({
   name: 'QuickReplyPicker',
   setup() {
-    const { setContent } = useMessageInputState();
+    const { insertInputContent } = useChatUIState();
     const showPicker = ref(false);
 
     const quickReplies = [
@@ -273,21 +238,27 @@ const actions = [
 </script>
 ```
 
+示例效果：
+
 #### 示例4：自定义表情面板
 ``` typescript
 <template>
-  <MessageInput :EmojiPicker="CustomEmojiPicker" />
+  <MessageInput :actions="actions" />
 </template>
 
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
-import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
+import { MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-vue3';
+
+const actions = [{
+    key: 'EmojiPicker',
+    component: CustomEmojiPicker,
+}];
 
 const CustomEmojiPicker = defineComponent({
   name: 'CustomEmojiPicker',
   setup() {
-    const { insertContent } = useMessageInputState();
+    const { insertInputContent } = useChatUIState();
     const showPicker = ref(false);
     const activeCategory = ref('common');
 
@@ -298,7 +269,7 @@ const CustomEmojiPicker = defineComponent({
     };
 
     const insertEmoji = (emoji: string) => {
-      insertContent(emoji);
+      insertInputContent(emoji);
       showPicker.value = false;
     };
 
@@ -384,8 +355,10 @@ const CustomEmojiPicker = defineComponent({
 </script>
 ```
 
+示例效果：
+
 ## Slots 详解
-- 类型：MessageInputSlots
+- 类型：`MessageInputSlots`
 
 - 详细说明：用于在输入组件的特定位置插入自定义内容。
 
@@ -401,7 +374,29 @@ const CustomEmojiPicker = defineComponent({
    }
    ```
 
-#### 示例1：自定义 footerToolbar 插槽
+   MessageInput 结构图解
+
+#### 示例1：自定义 headerToolbar 插槽
+
+使用其他 UI 框架重写 FilePicker 的 UI，但是继续复用 FilePicker 的能力。
+``` typescript
+<script lang="ts" setup>
+import { FilePicker } from '@tencentcloud/chat-uikit-vue3';
+import { Button } from 'other-ui-lib';
+</script>
+
+<template>
+  <MessageInput>
+    <template #headerToolbar>
+      <FilePicker>
+        <Button type="primary" :icon="File" />
+      </FilePicker>
+    </template>
+  </MessageInput>
+</template>
+```
+
+#### 示例2：自定义 footerToolbar 插槽
 ``` typescript
 <template>
   <MessageInput>
@@ -414,7 +409,9 @@ const CustomEmojiPicker = defineComponent({
 </template>
 ```
 
-#### 示例2：输入框前后缀功能
+示例效果：
+
+#### 示例3：输入框前后缀功能
 ``` typescript
 <template>
   <MessageInput>
@@ -433,7 +430,7 @@ const CustomEmojiPicker = defineComponent({
 </template>
 
 <script lang="ts" setup>
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
+import { MessageInput } from '@tencentcloud/chat-uikit-vue3';
 
 const handleAtUser = () => {
   // 触发@用户选择
@@ -447,9 +444,11 @@ const handleVoiceInput = () => {
 </script>
 ```
 
+示例效果：
+
 ### TextEditor
 
-类型：Component | null
+类型：`Component | null`
 
 详细说明：TextEditor 用于替换默认的文本编辑器组件，默认值为 `null`。
 
@@ -465,13 +464,12 @@ const handleVoiceInput = () => {
 
 <script lang="ts" setup>
 import { defineComponent, h, ref, onMounted } from 'vue';
-import { MessageInput } from '@tencentcloud/uikit-component-vue3';
-import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
+import { MessageInput, useChatContext } from '@tencentcloud/chat-uikit-vue3';
 
 const RichTextEditor = defineComponent({
   name: 'RichTextEditor',
   setup() {
-    const { sendMessage } = useMessageInputState();
+    const { sendMessage } = useChatContext();
     const editorRef = ref<HTMLDivElement | null>(null);
     const inputRawValue = ref('');
 
@@ -482,7 +480,7 @@ const RichTextEditor = defineComponent({
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        sendMessage(inputRawValue.value);
+        sendMessage({ type: 'textMessage', text: inputRawValue.value });
         if (editorRef.value) {
           editorRef.value.textContent = '';
         }
@@ -526,3 +524,28 @@ const RichTextEditor = defineComponent({
 });
 </script>
 ```
+
+示例代码：
+
+## 相关文档
+- 自定义组件 - UIKitProvider
+
+- 自定义组件 - ConversationList
+
+- 自定义组件 - Chat
+
+- 自定义组件 - MessageInput
+
+- 自定义组件 - MessageList
+
+- 自定义组件 - ChatSetting
+
+- 自定义组件 - ContactList
+
+- 自定义组件 - Search
+
+- [chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
+
+- [GitHub Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)
+
+## 交流与反馈