MateChat UI Library

The level of detail shown for each prompt is determined by the properties present in the prompt object within the list array:

1. Full Detail: Includes label and desc.
2. Medium Detail: Includes label but omits desc (shows only the label).
3. Minimal Detail: Omits both label and desc, showing only the icon.

// Full Detail
{ value: 'v1', label: 'Label', desc: 'Description', iconConfig: { ... } }

// Medium Detail
{ value: 'v2', label: 'Label', iconConfig: { ... } }

// Minimal Detail
{ value: 'v3', iconConfig: { ... } }

You can decorate the input content using ThemeTagItem and FormatInputItem via the formatContent array in FormatContentOptions:

• ThemeTags: Use ThemeTagItem to configure a prefix theme tag. It supports custom text and popup/tooltip content.
  • Constraint: Currently, you can only set a maximum of one ThemeTag, and it must be the first element in the formatContent array.
• FormatInputItems: Use FormatInputItem to insert specific input tags into the text area. These are used for default text filling or placeholder hints. Unlike theme tags, you can insert multiple FormatInputItems at various positions.

For integration with frameworks other than Vue or Angular, the following strategies are recommended:

• Web Components: Package MateChat components as Custom Elements to allow invocation from any framework.
• Micro-frontend Architecture: Use solutions like qiankun or microApp to load MateChat as an independent sub-application.

The @matechat/H5-starter project follows a modular structure organized by function and view modules:

Core Logic

• hooks/: Reusable logic and custom hooks.
• mock-data/: Simulated data for development.
• router/: Routing configuration.
• store/: Global state management.
• types/: Global TypeScript type definitions.
• utils/: Utility functions.

View Modules (view/)

The UI is divided into several functional modules:

• appendix/: Attachments.
• audio/: Audio features.
• chat-model/: Chat model configurations.
• chat-process/: Chat interaction processes.
• chat-setting/: Chat settings.
• guess-you-want/: "Guess you want" suggestions.
• header/: Header component.
• history/: Chat history.
• input/: Input field components.
• online-search/: Online search capabilities.
• welcome/: Welcome page.
• chat-view.vue: The main chat module component.

You can control the visual state of each file item by setting the status property in your file objects. Supported statuses include:

• success: File is ready (for upload or download).
• uploading: File is currently being uploaded (use percentage to show progress).
• uploadError: Upload failed (use error string to show the error message).
• downloading: File is currently being downloaded (use percentage to show progress).
• downloadError: Download failed (use error string to show the error message).

Example file object with status:

{ 
  uid: 102, 
  name: '功能演示.mp4', 
  size: 1024 * 1024 * 15, 
  type: 'video/mp4', 
  status: 'uploading', 
  percentage: 66 
}

The Layout component is the top-level container used to arrange different modules within the chat interface. It is designed to wrap sub-components such as Header, Content, Sender, and Aside to create a structured chat UI.

Typical layout composition includes:

• Header: For top-of-page content.
• Content: For the central message/content area.
• Sender: For bottom-of-page input/action areas.
• Aside: For side-panel content.

The context prop allows you to change the visual style of the file list based on the usage scenario:

• input: Designed for use below a file upload selector. Each file item displays a delete button in the top-right corner.
• dialog: Designed for chat history or message bubbles. It features a more compact and streamlined appearance for displaying sent files.

<!-- Input context -->
<McFileList :fileItems="inputList" context="input" @remove="handleRemove" />

<!-- Dialog context -->
<McFileList :fileItems="dialogList" context="dialog" />

The Layout component is the top-level container used to arrange different functional modules within the chat interface. It acts as a wrapper for sub-components like Header, Content, Sender, and Aside to create a consistent chat UI structure.

<Layout>
  <Header>...</Header>
  <Content>...</Content>
  <Sender>...</Sender>
  <Aside>...</Aside>
</Layout>