### Start Development Server

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING.md

Run this command to start the local development server for MateChat.

```bash
pnpm run docs:dev
```

--------------------------------

### Building a Conversational Interface with MateChat Components

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/components/README.md

This example shows how to construct a full chat interface using McLayout, McHeader, McIntroduction, McPrompt, McLayoutContent, McBubble, McPrompt, Button, McLayoutSender, and McInput components. It includes setup for prompts, message display, and input handling.

```html
<template>
  <McLayout class="container">
    <McHeader :title="'MateChat'" :logoImg="'https://matechat.gitcode.com/logo.svg'">
      <template #operationArea>
        <div class="operations">
          <i class="icon-helping"></i>
        </div>
      </template>
    </McHeader>
    <McLayoutContent
      v-if="startPage"
      style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
    >
      <McIntroduction
        :logoImg="'https://matechat.gitcode.com/logo2x.svg'"
        :title="'MateChat'"
        :subTitle="'Hi，欢迎使用 MateChat'"
        :description="description"
      ></McIntroduction>
      <McPrompt
        :list="introPrompt.list"
        :direction="introPrompt.direction"
        class="intro-prompt"
        @itemClick="onSubmit($event.label)"
      ></McPrompt>
    </McLayoutContent>
    <McLayoutContent class="content-container" v-else>
      <template v-for="(msg, idx) in messages" :key="idx">
        <McBubble
          v-if="msg.from === 'user'"
          :content="msg.content"
          :align="'right'"
          :avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }"
        >
        </McBubble>
        <McBubble v-else :content="msg.content" :avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/logo.svg' }" :loading="msg.loading"> </McBubble>
      </template>
    </McLayoutContent>
    <div class="shortcut" style="display: flex; align-items: center; gap: 8px">
      <McPrompt
        v-if="!startPage"
        :list="simplePrompt"
        :direction="'horizontal'"
        style="flex: 1"
        @itemClick="onSubmit($event.label)"
      ></McPrompt>
      <Button
        style="margin-left: auto"
        icon="add"
        shape="circle"
        title="新建对话"
        size="sm"
        @click="newConversation"
      />
    </div>
    <McLayoutSender>
      <McInput :value="inputValue" :maxLength="2000" @change="(e) => (inputValue = e)" @submit="onSubmit">
        <template #extra>
          <div class="input-foot-wrapper">
            <div class="input-foot-left">
              <span v-for="(item, index) in inputFootIcons" :key="index">
                <i :class="item.icon"></i>
                {{ item.text }}
              </span>
              <span class="input-foot-dividing-line"></span>
              <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
            </div>
            <div class="input-foot-right">
              <Button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''">清空输入</Button>
            </div>
          </div>
        </template>
      </McInput>
    </McLayoutSender>
  </McLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'vue-devui/button';
import 'vue-devui/button/style.css';

const description = [
  'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
  '作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。',
];
const introPrompt = {
  direction: 'horizontal',
  list: [
    {
      value: 'quickSort',
      label: '帮我写一个快速排序',
      iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
      desc: '使用 js 实现一个快速排序',
    },
    {
      value: 'helpMd',
      label: '你可以帮我做些什么？',
      iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
      desc: '了解当前大模型可以帮你做的事',
    },
    {
      value: 'bindProjectSpace',
      label: '怎么绑定项目空间',
      iconConfig: { name: 'icon-priority', color: '#3ac295' },
      desc: '如何绑定云空间中的项目',
    },
  ],
};
const simplePrompt = [
  {
    value: 'quickSort',
    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
    label: '帮我写一个快速排序',
  },
  {
    value: 'helpMd',
    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
    label: '你可以帮我做些什么？',
  },
];
const startPage = ref(true);
const inputValue = ref('');
const inputFootIcons = [
  { icon: 'icon-at', text: '智能体' },
  { icon: 'icon-standard', text: '词库' },
  { icon: 'icon-add', text: '附件' },
];

const messages = ref<any[]>([
  {
    from: 'user',
    content: '你好',
  },
  {
    from: 'model',
    content: '你好，我是 MateChat',
    id: 'init-msg',
  },
]);

const newConversation = () => {
  startPage.value = true;
  messages.value = [];
}

const onSubmit = (evt) => {
  inputValue.value='';
  startPage.value = false;
  // 用户发送消息
  messages.value.push({
    from: 'user',
    content: evt,
  });
  setTimeout(() => {
    // 模型返回消息
    messages.value.push({
      from: 'model',
      content: evt,
    });
  }, 200);
};
</script>

<style>
.container {
  width: 1000px;
  margin: 20px auto;
  height: calc(100vh - 40px);
  padding: 20px;
  gap: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}
</style>
```

--------------------------------

### Start Development Server

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/kbone-miniprogram-starter/README.md

Execute this command to start the development server. The application will be accessible at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Build a Simple Chat Interface with MateChat Components

Source: https://github.com/devcloudfe/matechat/blob/dev/README.md

This example demonstrates building a complete chat interface using various MateChat components like McLayout, McHeader, McLayoutContent, McBubble, McPrompt, and McInput. It includes setup for messages, input handling, and conversation management. Ensure all necessary components and styles are imported.

```vue
<template>
  <McLayout class="container">
    <McHeader :title="'MateChat'" :logoImg="'https://matechat.gitcode.com/logo.svg'">
      <template #operationArea>
        <div class="operations">
          <i class="icon-helping"></i>
        </div>
      </template>
    </McHeader>
    <McLayoutContent
      v-if="startPage"
      style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
    >
      <McIntroduction
        :logoImg="'https://matechat.gitcode.com/logo2x.svg'"
        :title="'MateChat'"
        :subTitle="'Hi，欢迎使用 MateChat'"
        :description="description"
      ></McIntroduction>
      <McPrompt
        :list="introPrompt.list"
        :direction="introPrompt.direction"
        class="intro-prompt"
        @itemClick="onSubmit($event.label)"
      ></McPrompt>
    </McLayoutContent>
    <McLayoutContent class="content-container" v-else>
      <template v-for="(msg, idx) in messages" :key="idx">
        <McBubble
          v-if="msg.from === 'user'"
          :content="msg.content"
          :align="'right'"
          :avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }"
        >
        </McBubble>
        <McBubble v-else :content="msg.content" :avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/logo.svg' }" :loading="msg.loading"> </McBubble>
      </template>
    </McLayoutContent>
    <div class="shortcut" style="display: flex; align-items: center; gap: 8px">
      <McPrompt
        v-if="!startPage"
        :list="simplePrompt"
        :direction="'horizontal'"
        style="flex: 1"
        @itemClick="onSubmit($event.label)"
      ></McPrompt>
      <Button
        style="margin-left: auto"
        icon="add"
        shape="circle"
        title="新建对话"
        size="md"
        @click="newConversation"
      />
    </div>
    <McLayoutSender>
      <McInput :value="inputValue" :maxLength="2000" @change="(e) => (inputValue = e)" @submit="onSubmit">
        <template #extra>
          <div class="input-foot-wrapper">
            <div class="input-foot-left">
              <span v-for="(item, index) in inputFootIcons" :key="index">
                <i :class="item.icon"></i>
                {{ item.text }}
              </span>
              <span class="input-foot-dividing-line"></span>
              <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
            </div>
            <div class="input-foot-right">
              <Button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''"><span class="demo-button-content">清空输入</span></Button>
            </div>
          </div>
        </template>
      </McInput>
    </McLayoutSender>
  </McLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'vue-devui/button';
import 'vue-devui/button/style.css';

const description = [
  'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
  '作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。',
];
const introPrompt = {
  direction: 'horizontal',
  list: [
    {
      value: 'quickSort',
      label: '帮我写一个快速排序',
      iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
      desc: '使用 js 实现一个快速排序',
    },
    {
      value: 'helpMd',
      label: '你可以帮我做些什么？',
      iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
      desc: '了解当前大模型可以帮你做的事',
    },
    {
      value: 'bindProjectSpace',
      label: '怎么绑定项目空间',
      iconConfig: { name: 'icon-priority', color: '#3ac295' },
      desc: '如何绑定云空间中的项目',
    },
  ],
};
const simplePrompt = [
  {
    value: 'quickSort',
    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
    label: '帮我写一个快速排序',
  },
  {
    value: 'helpMd',
    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
    label: '你可以帮我做些什么？',
  },
];
const startPage = ref(true);
const inputValue = ref('');
const inputFootIcons = [
  { icon: 'icon-at', text: '智能体' },
  { icon: 'icon-standard', text: '词库' },
  { icon: 'icon-add', text: '附件' },
];

const messages = ref<any[]>([]);

const newConversation = () => {
  startPage.value = true;
  messages.value = [];
}

const onSubmit = (evt) => {
  inputValue.value='';
  startPage.value = false;
  // 用户发送消息
  messages.value.push({
    from: 'user',
    content: evt,
  });
  setTimeout(() => {
    // 模型返回消息
    messages.value.push({
      from: 'model',
      content: evt,
    });
  }, 200);
};
</script>

<style>
.container {
  width: 1000px;
  margin: 20px auto;
  height: calc(100vh - 82px);
  padding: 20px;
  gap: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

.input-foot-wrapper {
  display: flex;
  justify-content: space-between;
}
</style>
```

--------------------------------

### Start Documentation Site Development Server

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING-DEV.md

Command to start the documentation site in development mode, enabling hot-reloading for quick previewing of changes.

```bash
# 启动文档站点
npm run docs:dev
```

--------------------------------

### Start Vue Starter Development Server

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/vue-starter/README.md

Run this command from the MateChat root directory to start the development server for the Vue starter project. Alternatively, navigate to the vue-starter directory and run 'pnpm run dev'.

```bash
pnpm run dev:vue-starter
```

```bash
pnpm run dev
```

--------------------------------

### Start Vue Documentation Site

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING-DEV.md

Run this command to start the local development server for the Vue documentation site. It supports hot module replacement for faster development.

```bash
npm run docs:dev
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING.md

Install all necessary Node.js dependencies for the project using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Mermaid Library

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/markDownCard/demo.md

Install the mermaid library using npm before enabling mermaid rendering in the McMarkdownCard component.

```bash
$ npm install mermaid
```

--------------------------------

### Install OpenAI Package

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/components-ng/projects/components-ng/README.md

Install the OpenAI package using npm. This is the first step before using the OpenAI library in your project.

```bash
npm install openai
```

--------------------------------

### Check Node.js and pnpm Versions

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/use-guide/contributing.md

Verify that Node.js and pnpm are installed correctly by checking their versions. If pnpm is not installed, install it globally using npm.

```bash
node -v
pnpm -v
```

```bash
npm install -g pnpm
```

--------------------------------

### Install Specific Sub-project Dependencies

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/vue-starter/README.md

Use the --filter flag with pnpm to install dependencies for the vue-starter sub-project specifically, or to add a particular package to it.

```bash
pnpm install --filter vue-starter
```

```bash
pnpm add "package-name" --filter vue-starter
```

--------------------------------

### Install pnpm Globally

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING.md

If pnpm is not found after installing Node.js, use this command to install it globally via npm.

```bash
npm install -g pnpm
```

--------------------------------

### Install MateChat Skills

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/use-guide-ng/skills.md

Use the 'skills' tool to add the matechat-ng skill to your Agent. This command will list available Agents and allow you to select where to install the skill.

```bash
npx skills add DevCloudFE/MateChat --skill matechat-ng
```

--------------------------------

### Install MateChat Core Dependencies

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/use-guide/introduction.md

Install the core MateChat package along with vue-devui and @devui-design/icons. Note that vue-devui and @devui-design/icons are optional and used here for demonstration.

```bash
npm i @matechat/core vue-devui @devui-design/icons
```

--------------------------------

### Using Common Utility Functions

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING-DEV.md

Example of importing and using a utility function from the common components library. Ensure the correct path for the utility is used.

```typescript
// 引入公共工具函数
import MdParserUtils from "../components-common/MarkdownCard/common/parser";

// 使用公共工具函数
MdParserUtils.clearElementChildren(existingElement);
```

--------------------------------

### Date Formatting with `day.js` Library

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/kbone-miniprogram-starter/src/mock-data/formatDate.md

Integrate `day.js` for a lightweight and user-friendly approach to date formatting. Install via npm and use its `format` method for various date patterns.

```javascript
// 安装：npm install dayjs
const dayjs = require('dayjs')

console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')) // 输出：2024-07-15 14:30:45
```

--------------------------------

### Initialize and Call OpenAI Model

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/components-ng/projects/components-ng/README.md

Initialize the OpenAI client with your API key and base URL, then call the chat completions API to interact with a model. This example demonstrates streaming responses.

```javascript
import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: '', // 模型APIKey
  baseURL: '', // 模型API地址
  dangerouslyAllowBrowser: true,
});

const fetchData = (ques) => {
  const completion = await client.chat.completions.create({
    model: 'my-model', // 替换为自己的model名称
    messages: [
      { role: 'user', content: ques },
    ],
    stream: true, // 为 true 则开启接口的流式返回
  });

  for await (const chunk of completion) {
    console.log('content: ', chunk.choices[0]?.delta?.content || '');
    console.log('chatId: ', chunk.id);
  }
}
```

--------------------------------

### Customizing McIntroduction with Slots

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/introduction/demo.md

Customize the area below the main introduction content using slots. This allows for adding custom elements like quick start links or prompts.

```vue
<template>
  <McIntroduction :logoImg="'/logo2x.svg'" :title="'MateChat'" :subTitle="'Hi，欢迎使用 MateChat'">
    <div class="quick-start">
      <i class="icon-helping"></i>
      <span>点我快速开始</span>
    </div>
  </McIntroduction>
</template>

<style scoped lang="scss">
.quick-start {
  padding: 8px 12px;
  border: 1px solid var(--devui-line);
  border-radius: 8px;
  cursor: pointer;

  i {
    margin-right: 8px;
  }
}
</style>
```

--------------------------------

### Basic Bubble Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/en/components/bubble.md

Demonstrates the fundamental setup for using the Bubble component in a Vue.js application.

```vue
<template>
  <div>{{ msg }}</div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const msg = ref('组件demo');

    return { msg };
  },
});
</script>
```

--------------------------------

### Python Quick Sort Implementation

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/markDownCard/demo.md

A Python implementation of the Quick Sort algorithm. It includes detailed comments explaining the logic, base case, pivot selection, partitioning, and recursive calls. This is provided as an example within the markdown content.

```python
def quick_sort(arr):
    """实现快速排序的递归函数"""
    # 基线条件：当数组长度小于等于1时，直接返回
    if len(arr) <= 1:
        return arr
    
    # 选择中间元素作为基准值（可有效避免最坏情况）
    pivot = arr[len(arr) // 2]
    
    # 将数组分成三部分：小于基准、等于基准、大于基准
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    
    # 递归排序左右子数组，合并结果
    return quick_sort(left) + middle + quick_sort(right)

# 示例用法
if __name__ == "__main__":
    example_arr = [3,6,8,10,1,2,1]
    sorted_arr = quick_sort(example_arr)
    print("原数组：", example_arr)
    print("排序后：", sorted_arr)
```

--------------------------------

### Enable Mermaid Rendering

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/markDownCard/demo.md

Configure the McMarkdownCard component with enableMermaid set to true to render Mermaid diagrams. Ensure the mermaid library is installed.

```vue
<template>
  <McMarkdownCard :enableMermaid="true" :content="content" :theme="theme"></McMarkdownCard>
</template>
<script setup>
import { ref, onMounted } from 'vue';
let themeService;
const theme = ref('light');
const content = ref(
 `# Flow Chart
\
\
```mermaid
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
\
```

# Class Diagram
\
\
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
\
```

# State Diagram
\
\
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
\
```

`);

const handleAction = (codeBlockData) => {
  console.log(codeBlockData);
}

const changeTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  themeClass.value = themeClass.value === 'light-background' ? 'dark-background' : 'light-background';
}

const themeChange = () => {
  if (themeService) {
    theme.value = themeService.currentTheme.id === 'infinity-theme' ? 'light' : 'dark';
  }
}

onMounted(() => {
  if(typeof window !== 'undefined'){
    themeService = window['devuiThemeService'];
  }
  themeChange();
  if (themeService && themeService.eventBus) {
    themeService.eventBus.add('themeChanged', themeChange);
  }
})
</script>
```

--------------------------------

### Clone MateChat Repository (HTTPS)

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING.md

Use this command to clone the MateChat repository locally using HTTPS. Ensure Git is installed and configured.

```bash
git clone https://gitcode.com/DevCloudFE/MateChat.git
```

--------------------------------

### Check Node.js and pnpm Versions

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING.md

Verify that Node.js and pnpm are correctly installed by checking their versions. Expected output shows version numbers like 'v22.12.0' and '9.15.4'.

```bash
node -v
pnpm -v
```

--------------------------------

### Build for Production

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/kbone-miniprogram-starter/README.md

Use this command to create a production-ready build of your application.

```bash
pnpm build
```

--------------------------------

### Preview Production Build

Source: https://github.com/devcloudfe/matechat/blob/dev/packages/create-matechat/templates/kbone-miniprogram-starter/README.md

Run this command to locally preview the production build of your application.

```bash
pnpm preview
```

--------------------------------

### Basic Introduction Component Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/introduction/demo.md

Use the basic IntroductionComponent to display a logo, title, and subtitle. This component is suitable for presenting essential introductory information.

```html
<mc-ng-introduction-basic></mc-ng-introduction-basic>
```

--------------------------------

### Import Introduction Component

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/introduction/demo.md

Import the IntroductionComponent from the MateChat Ng library. This is the first step to using the component.

```typescript
import { IntroductionComponent } from '@matechat/ng';
```

--------------------------------

### Introduction Component with Description

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/introduction/demo.md

Enhance the IntroductionComponent by using the 'description' field to provide additional details. This is useful for offering more context or supplementary information.

```html
<mc-ng-introduction-description></mc-ng-introduction-description>
```

--------------------------------

### Basic Prompt Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/prompt/demo.md

Demonstrates the basic usage of the Prompt component by defining a list of prompts.

```html
<mc-ng-prompt-basic />
```

--------------------------------

### Initialize Vue+TS Project with Vite

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/use-guide/introduction.md

Use this command to initialize a new Vue.js project with TypeScript using Vite.

```bash
npm create vite@latest
```

--------------------------------

### Reset Chat Conversation

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/playground/playground.md

Resets the chat to a new conversation state by clearing messages and setting the start chat flag.

```javascript
const onNewConvo = () => {
  startChat.value = false;
  messages.value = [];
};
```

--------------------------------

### Configure Emoji Rendering

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/markDownCard/demo.md

Enable emoji rendering in the McMarkdownCard component by configuring the mdPlugins with the markdown-it-emoji plugin. Ensure the markdown-it-emoji dependency is installed.

```javascript
import { full as emoji } from 'markdown-it-emoji'
```

```vue
<template>
  <McMarkdownCard :content="content" :theme="theme" :mdPlugins="mdPlugins"></McMarkdownCard>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { full as emoji } from 'markdown-it-emoji' // 请首先安装markdown-it-emoji依赖
let themeService;
const theme = ref('light');
const mdPlugins = ref([{
  plugin: emoji
}])
const content = ref(
`
:joy: :thumbsup: :laughing: :blush: :dog:
`
);

const handleAction = (codeBlockData) => {
  console.log(codeBlockData);
}

const changeTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  themeClass.value = themeClass.value === 'light-background' ? 'dark-background' : 'light-background';
}

const themeChange = () => {
  if (themeService) {
    theme.value = themeService.currentTheme.id === 'infinity-theme' ? 'light' : 'dark';
  }
}

onMounted(() => {
  if(typeof window !== 'undefined'){
    themeService = window['devuiThemeService'];
  }
  themeChange();
  if (themeService && themeService.eventBus) {
    themeService.eventBus.add('themeChanged', themeChange);
  }
})
</script>


```

--------------------------------

### Basic Prompt Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/prompt/demo.md

Demonstrates the basic usage of the McPrompt component by providing a list of prompt data. Each prompt item includes a value, label, icon configuration, and description.

```vue
<template>
  <div style="width: 300px">
    <McPrompt :list="promptData"></McPrompt>
  </div>
</template>

<script setup>
const promptData = [
  {
    value: 'quickSort',
    label: '帮我写一个快速排序',
    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
    desc: '使用 js 实现一个快速排序',
  },
  {
    value: 'helpMd',
    label: '你可以帮我做些什么？',
    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
    desc: '了解当前大模型可以帮你做的事',
  },
];
</script>
```

--------------------------------

### McIntroduction with Additional Description

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/introduction/demo.md

Enhance the introduction by using the `description` prop to provide more detailed information. The description is an array of strings.

```vue
<template>
  <McIntroduction
    :logoImg="'/logo2x.svg'"
    :title="'MateChat'"
    :subTitle="'Hi，欢迎使用 MateChat'"
    :description="description"
  ></McIntroduction>
</template>

<script setup>
const description = [
  'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
  '作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。',
];
</script>
```

--------------------------------

### Basic McIntroduction Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/introduction/demo.md

Use the McIntroduction component to display a logo, title, and subtitle. This is the most basic way to present introductory information.

```vue
<template>
  <McIntroduction :logoImg="'/logo2x.svg'" :title="'MateChat'" :subTitle="'Hi，欢迎使用 MateChat'"></McIntroduction>
</template>
```

--------------------------------

### Trigger Interface Definition

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/mention/api.md

Defines the structure for a custom trigger. A trigger has a key (the prefix character) and an optional boolean to specify if it should only trigger at the start of the input.

```typescript
interface Trigger {
  key: string; // 前缀符
  onlyInputStart?: boolean; // 是否仅在前缀符出现在输入内容首部的时候触发组件
}
```

--------------------------------

### Introduction Component with Text Alignment

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/introduction/demo.md

Control the text alignment within the IntroductionComponent using the 'align' parameter. This feature helps adapt the component's appearance to various layout requirements.

```html
<mc-ng-introduction-align></mc-ng-introduction-align>
```

--------------------------------

### Drag and Drop Attachment

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/attachment/demo.md

Enable drag-and-drop uploads with the `draggable` property (defaults to true). This example also limits image types and file size.

```html
<mc-ng-attachment-drag></mc-ng-attachment-drag>
```

--------------------------------

### Configure PlantUML Rendering

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/markDownCard/demo.md

Use the md-plugins option to configure PlantUML rendering with markdown-it-plantuml. Ensure the markdown-it-plantuml dependency is installed and optionally provide a custom server URL.

```javascript
import PlantUml from 'markdown-it-plantuml'
```

```vue
<template>
  <McMarkdownCard :content="content" :theme="theme" :mdPlugins="mdPlugins"></McMarkdownCard>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import PlantUml from 'markdown-it-plantuml'; // 请首先安装markdown-it-plantuml依赖
let themeService;
const theme = ref('light');
const mdPlugins = ref([{
  plugin: PlantUml,
  opts: {
    server: 'https://www.plantuml.com/plantuml'
  } // 自定义server可参考plantuml官方文档进行搭建
}])
const content = ref(
`
@startuml
Alice -> "Bob()" : Hello
"Bob()" -> "This is very long" as Long
' You can also declare:
' "Bob()" -> Long as "This is very long"
Long --> "Bob()" : ok
@enduml
`);

const handleAction = (codeBlockData) => {
  console.log(codeBlockData);
}

const changeTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  themeClass.value = themeClass.value === 'light-background' ? 'dark-background' : 'light-background';
}

const themeChange = () => {
  if (themeService) {
    theme.value = themeService.currentTheme.id === 'infinity-theme' ? 'light' : 'dark';
  }
}

onMounted(() => {
  if(typeof window !== 'undefined'){
    themeService = window['devuiThemeService'];
  }
  themeChange();
  if (themeService && themeService.eventBus) {
    themeService.eventBus.add('themeChanged', themeChange);
  }
})
</script>
```

--------------------------------

### Introduction Component with Custom Slot

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/introduction/demo.md

Customize the footer area of the IntroductionComponent using slots. This allows for the inclusion of custom content such as prompts or frequently asked questions.

```html
<mc-ng-introduction-slot></mc-ng-introduction-slot>
```

--------------------------------

### Basic Input Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/input/demo.md

Demonstrates the basic usage of the input component by binding value and other essential parameters.

```html
<mc-ng-input-basic></mc-ng-input-basic>
```

--------------------------------

### Drag-and-Drop Attachment Upload

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/attachment/demo.md

Enables drag-and-drop file uploads using the `draggable` property. This example also configures image type and size restrictions, and specifies a drop container.

```vue
<template>
  <McInput v-model="inputValue" ref="inputEl" placeholder="拖拽文件到页面，或点击左侧图标上传附件...">
    <!-- 1. 文件列表放置在 head 插槽 -->
    <template #head>
      <McFileList
        v-if="dragFileList.length > 0"
        :file-items="dragFileList"
        context="input"
        @remove="(file) => (dragFileList = dragFileList.filter((f) => f.uid !== file.uid))"
      />
    </template>
    <!-- 2. 附件上传器放置在 extra 插槽 -->
    <template #extra>
      <div class="input-foot-left">
        <McAttachment
          v-model="dragFileList"
          :upload-options="uploadOptions"
          accept="image/*"
          :max-size="0.5"
          multiple
          drop-placeholder="请放置到此处"
          :get-drop-container="dropContainer"
        >
          <i class="icon-appendix"></i>
        </McAttachment>
      </div>
    </template>
  </McInput>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { FileItem, UploadOptions, McInput } from '@matechat/core/Attachment';

const inputValue = ref('');
const inputEl = ref();
const dragFileList = ref<FileItem[]>([]);
const uploadOptions = ref<UploadOptions>({
  uri: 'https://run.mocky.io/v3/132b3ea3-23ea-436b-aed4-c43ef9d116f0',
});
const dropContainer = () => inputEl.value.$el;
</script>
```

--------------------------------

### FileList with Input and Dialog Contexts

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/fileList/demo.md

Demonstrates using McFileList in different contexts: 'input' context for file upload selectors, showing a delete button, and 'dialog' context for chat messages, with a simpler appearance. It also shows file status like uploading, success, and errors.

```vue
<template>
  <h4 style="margin-bottom: 20px;">输入框上下文</h4>
  <McInput v-model="inputValue" placeholder="这是一个带有文件列表的输入框...">
    <template #head>
      <McFileList 
        :fileItems="inputList" 
        context="input" 
        @remove="handleRemove" 
        @retry-upload="handleRetryUpload" 
      />
    </template>
  </McInput>

  <h4 style="margin: 20px 0;">对话框上下文</h4>
  <McBubble :avatarConfig="userAvatar" :align="'right'">
    <div>上传的文件，包含了多种状态：</div>
    <McFileList :fileItems="dialogList" context="dialog" />
  </McBubble>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const inputValue = ref('');

const userAvatar = {
  imgSrc: '/png/demo/userAvatar.svg',
};

// 用于 Input 上下文的列表
const inputList = ref([
  { uid: 101, name: '用户手册.pdf', size: 1024 * 1024 * 2, type: 'application/pdf', status: 'success' },
  { uid: 102, name: '功能演示.mp4', size: 1024 * 1024 * 15, type: 'video/mp4', status: 'uploading', percentage: 66 },
  { uid: 103, name: '错误日志.log', size: 1024 * 5, type: 'text/plain', status: 'uploadError', error: '上传中断' },
]);

// 用于 Dialog 上下文的列表
const dialogList = ref([
  { uid: 201, name: '用户手册.pdf', size: 1024 * 1024 * 2, type: 'application/pdf', status: 'success' },
  { uid: 202, name: '界面设计稿.png', size: 1024 * 345, type: 'image/png', status: 'success' },
  { uid: 203, name: '项目依赖.zip', size: 1024 * 1024 * 8, type: 'application/zip', status: 'success' },
]);

const handleRemove = (file) => {
  inputList.value = inputList.value.filter(item => item.uid !== file.uid);
};

const handleRetryUpload = (file) => {
  const targetFile = inputList.value.find(item => item.uid === file.uid);
  if (targetFile) {
    targetFile.status = 'uploading';
    targetFile.percentage = 0;
  }
};

// 关键：在组件挂载后，直接修改传入的 props 数据来模拟状态
onMounted(() => {
  // 1. 模拟“下载中”状态
  const downloadingFile = dialogList.value.find(file => file.uid === 202);
  if (downloadingFile) {
    downloadingFile.status = 'downloading';
    downloadingFile.percentage = 45;
  }

  // 2. 模拟“下载失败”状态
  const failedFile = dialogList.value.find(file => file.uid === 203);
  if (failedFile) {
    failedFile.status = 'downloadError';
    failedFile.error = '下载链接已失效';
  }
});
</script>
```

--------------------------------

### Access Site Data with useData() in Markdown

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/en/components/api-examples.md

Use the `useData()` hook within a `<script setup>` block in `.md` files to access theme, page, and frontmatter data. This data can then be displayed using Vue template syntax.

```markdown
<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

--------------------------------

### Custom Prompt Icons

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/prompt/demo.md

Configure different icons for prompts, including setting color, size, and using custom icons.

```html
<mc-ng-prompt-icon />
```

--------------------------------

### Custom Arrangement of Multiple Formatted Contents

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/input/demo.md

Arrange various formatted tags within `FormatContentOptions.formatContent` to achieve diverse text formatting in the input field. This example shows how to use custom slots for rendering specific tags like `themeTag`.

```vue
<template>
  <div class="button-wrapper">
    <d-button @click="setMixTags">自定义编排插入</d-button>
  </div>
  <McInput :formatContentOptions="formatContentOptions" @change="onInputChange" @submit="onSubmit">
    <template #themeTag="{ themeTag }">
      <span class="tip-tag-custom">
        <i class="icon-code-editor-close"></i>
        <span :class="['tip-tag-icon', 'icon-default']"></span>
        <span id="ai-input-prefix" class="ai-input-prefix">{{themeTag.themeTagText}}</span>
      </span>
    </template>
  </McInput>
</template>

<script setup>
import { defineComponent, ref } from 'vue';

const loading = ref(false);
const formatContentOptions = ref({
});
const onInputChange = (e) => {
  console.log('input change---', e);
};
const onSubmit = (e) => {
  loading.value = true;
  console.log('input submit---', e);
};


const mixTags = [
  {
    type: 'themeTag',
    themeTagKey: 'themeTag',// 主题标签的唯一标识
    themeTagText: '文章生成', // 主题标签的文本内容
    clearInput: true, // 关闭主题标签时是否清空对应输入框内容
    popoverContent: '点击关闭主题', // 主题标签的pop弹出提示内容
  },
  {
    key: '',
    type: 'text',
    content: '帮我写一篇面向',
    placeholder: '',
  },
  {
    key: 'input1',
    type: 'input',
    placeholder: '输入目标人群',
    content: '职场人士',
  },
  {
    key: '',
    type: 'text',
    content: '关于',
    placeholder: '',
  },
  {
    key: 'input2',
    type: 'input',
    placeholder: '输入产品',
    content: '',
  },
  {
    key: '',
    type: 'text',
    content: '的宣传文案，需要直击痛点，吸引用户点击。',
    placeholder: '',
  },
];

const setMixTags = () => {
  formatContentOptions.value = {
    formatContent: mixTags,
  };
}

</script>

<style lang="scss">
  .button-wrapper {
    margin-bottom: 12px;
  }

  .tip-tag-custom {
    &:hover {
      i {
        display: inline-block;
      }

      .tip-tag-icon {
        display: none;
      }

    }
    i {
      cursor: pointer;
      width: 16px;
      height: 16px;
      margin-right: 4px;
      vertical-align: middle;
      display: none;
    }

    .tip-tag-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      display: inline-block;
      vertical-align: text-bottom;
      background-size: 100% 100%;
      &.icon-default {
        background-image: url('/logo.svg'); // 补一个默认图标
      }
    }
  }
</style>
```

--------------------------------

### Access Site Data with useData() in Vue

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/en/components/api-examples.md

The `useData()` hook can also be used in `.vue` files within a `<script setup>` block to retrieve site, theme, page, and frontmatter data. This allows for dynamic rendering of content based on the site's configuration and current page.

```vue
<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

--------------------------------

### Input Component Parameters

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/input/api.md

Configuration options for the Input component.

```APIDOC
## Input Component Parameters

### Description
Configuration options for the Input component.

### Parameters
#### Props
- **value** (string) - Optional - The value of the input field, displayed as plain text.
- **formatContentOptions** (FormatContentOptions) - Optional - Options for formatting the input content, allowing different display formats based on configurations. Mutually exclusive with `value`.
- **placeholder** (string) - Optional - Placeholder text for the input field.
- **disabled** (boolean) - Optional - Whether the input field is disabled.
- **displayType** (DisplayType) - Optional - The display style of the input field. Defaults to 'full'.
- **loading** (boolean) - Optional - Whether the input is in a sending state. If true, clicking the send button can pause the response.
- **showCount** (boolean) - Optional - Whether to display the character count.
- **maxLength** (number) - Optional - The maximum number of characters allowed in the input field.
- **submitShortKey** (SubmitShortKey | null) - Optional - The shortcut key for sending. `null` means no shortcut key is used. Defaults to 'enter'.
- **variant** (InputVariant) - Optional - The visual style of the input field. Defaults to 'bordered'.
- **sendBtnVariant** (SendBtnVariant) - Optional - The style of the send button. Defaults to 'full'.
- **autofocus** (boolean) - Optional - Whether to automatically focus the input field.
- **autosize** (TextareaAutoSize) - Optional - Whether to automatically adjust the textarea height.
```

--------------------------------

### Basic Usage of McInput

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components/input/demo.md

Demonstrates the basic usage of the McInput component by binding the value and handling input events.

```vue
<template>
  <McInput :value="inputValue" :maxLength="2000" :loading="loading" showCount @change="onInputChange" @submit="onSubmit" @cancel="onCancel">
  </McInput>
</template>

<script setup>
import { defineComponent, ref } from 'vue';

const inputValue = ref('');
const loading = ref(false);

const onInputChange = (e) => {
  console.log('input change---', e);
};
const onSubmit = (e) => {
  loading.value = true;
  console.log('input submit---', e);
};
const onCancel = () => {
  loading.value = false;
  console.log('input cancel');
};
</script>
```

--------------------------------

### Basic FileList Usage

Source: https://github.com/devcloudfe/matechat/blob/dev/docs/components-ng/fileList/demo.md

Render a list of files using the fileItems property. The context property can control the appearance in different scenarios.

```html
<mc-ng-filelist-basic></mc-ng-filelist-basic>
```

--------------------------------

### Run Angular Demo Application

Source: https://github.com/devcloudfe/matechat/blob/dev/CONTRIBUTING-DEV.md

Execute this command to run the Angular demo application locally. This is useful for early-stage component development and supports hot reloading.

```bash
pnpm run demo:ng
```