# LLM 对话框组件

**Repository Path**: linruoxin-sy/llm-dialog-component

## Basic Information

- **Project Name**: LLM 对话框组件
- **Description**: 一个基于Vite+Vue3的 LLM 对话框组件项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-11-20
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LLM 对话框组件

#### 介绍

一个基于适用于 Vue3 的 LLM 对话框组件项目

#### 快速上手

1.  **引入组件**

    在你的 Vue 组件中引入 `LLMDialog`：

    ```vue
    <script setup lang="ts">
    import LLMDialog from 'path/to/LLMDialog.vue'; // 修改为你的组件路径
    import { ref, reactive } from 'vue';
    import { ld } from 'path/to/llmDialog'; // 修改为你的 llmDialog 模块路径

    // 用于 v-model 绑定输入框内容
    const prompt = ref('');

    // 组件数据状态
    const dialogState = reactive({
      visible: true,
      theme: 'light' as const, // 'light' 或 'dark'
      messages: [
        ld.createUserMessage('你好！'),
        ld.createLLMMessage('我能为你做些什么？'),
      ],
      files: [
        ld.createFile(new File(['content'], 'example.txt', { type: 'text/plain' })),
      ],
    });

    // 发送事件处理
    const handleSend = (
      text: string,
      files: File[],
      append: (text: string) => void,
      done: () => void
    ) => {
      console.log('发送消息:', text, files);
      // 模拟接收消息
      let count = 0;
      const mockResponse = "这是模拟的回复内容。";
      const interval = setInterval(() => {
        if (count < mockResponse.length) {
          append(mockResponse[count]);
          count++;
        } else {
          clearInterval(interval);
          done(); // 标记消息发送/接收完成
        }
      }, 100);
    };

    // 其他事件处理 (可选)
    const handleStop = () => console.log('停止接收');
    const handleThemeChange = (newTheme: string) => console.log('主题切换:', newTheme);
    // ... 其他事件处理器
    </script>
    ```

2.  **在模板中使用**

    ```vue
    <template>
      <div style="width: 100%; height: 500px;"> {/* 设置一个容器并指定高度 */}
        <LLMDialog
          v-model="prompt"
          :visible="dialogState.visible"
          :theme="dialogState.theme"
          :messages="dialogState.messages"
          :files="dialogState.files"
          @send="handleSend"
          @stop="handleStop"
          @theme="handleThemeChange"
          {{!-- @upload-files="handleUploadFiles" --}}
          {{!-- @delete-file="handleDeleteFile" --}}
          {{!-- @clear-files="handleClearFiles" --}}
        />
      </div>
    </template>
    ```

3.  **说明**
    *   使用 `v-model` 双向绑定输入框的内容到 `prompt`变量。
    *   通过 `:visible` 控制对话框的显示和隐藏。
    *   通过 `:theme` 设置主题 (`light` 或 `dark`)。
    *   通过 `:messages` 传递消息列表。消息对象可以通过导入的 `ld.createUserMessage()` 和 `ld.createLLMMessage()` 创建。
    *   通过 `:files` 传递文件列表。文件对象可以通过导入的 `ld.createFile()` 创建。
    *   监听 `@send` 事件来处理用户发送消息的逻辑。该事件会传递用户输入的文本、附加的文件列表、一个用于追加LLM回复文本的 `append` 函数，以及一个标记LLM回复完成的 `done` 函数。
    *   可以按需监听其他事件，如 `@stop`, `@theme`, `@upload-files`, `@delete-file`, `@clear-files`。