diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..dffa32c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,35 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#1D3137",
+        "titleBar.activeBackground": "#28444C",
+        "titleBar.activeForeground": "#F8FAFB",
+        "terminal.background": "#231F20",
+        "terminal.foreground": "#D9D8D8",
+        "terminalCursor.background": "#D9D8D8",
+        "terminalCursor.foreground": "#D9D8D8",
+        "terminal.ansiBlack": "#231F20",
+        "terminal.ansiBlue": "#009DDC",
+        "terminal.ansiBrightBlack": "#737171",
+        "terminal.ansiBrightBlue": "#009DDC",
+        "terminal.ansiBrightCyan": "#85CEBC",
+        "terminal.ansiBrightGreen": "#00853E",
+        "terminal.ansiBrightMagenta": "#98005D",
+        "terminal.ansiBrightRed": "#EE2E24",
+        "terminal.ansiBrightWhite": "#FFFFFF",
+        "terminal.ansiBrightYellow": "#FFD204",
+        "terminal.ansiCyan": "#85CEBC",
+        "terminal.ansiGreen": "#00853E",
+        "terminal.ansiMagenta": "#98005D",
+        "terminal.ansiRed": "#EE2E24",
+        "terminal.ansiWhite": "#D9D8D8",
+        "terminal.ansiYellow": "#FFD204",
+        "titleBar.inactiveBackground": "#1D3136",
+        "titleBar.inactiveForeground": "#F7FAFB",
+        "statusBar.background": "#1D3136",
+        "statusBar.foreground": "#F7FAFB",
+        "statusBar.debuggingBackground": "#1D3136",
+        "statusBar.debuggingForeground": "#F7FAFB",
+        "statusBar.noFolderBackground": "#1D3136",
+        "statusBar.noFolderForeground": "#F7FAFB"
+    }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 0d191ae..31d834a 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,107 @@
-# TUIKit_Vue3
+# Tencent Cloud RTC TUIKit for Vue 3
+
+[English](./README.md) | [简体中文](./README_ZH.md)
+
+A **core Vue 3 component library** for Tencent Cloud RTC TUIKit, designed for three major real-time scenarios: **Chat** (instant messaging), **Live** (interactive live streaming), and **Room** (multi-user audio/video rooms).
+
+It provides production-ready UI components together with reactive state modules, so you can either use components independently or compose them into complete scenario-based experiences.
+
+## Key Features
+
+| Feature | Description |
+| ------ | ------ |
+| **Scenario-oriented UI components** | Covers Chat, Live, and Room scenarios. Components can be used individually or freely composed. |
+| **Reactive state management** | Each component is backed by fine-grained reactive data and action methods. |
+| **Scenario-based exports** | Import only what you need through `./chat`, `./live`, and `./room` sub-entries to reduce bundle size. |
+| **Internationalization** | Built-in multi-language support based on i18next. |
+| **Type safety** | Ships with complete TypeScript type definitions. |
+
+## Component Structure (`src/components/`)
+
+### Chat
+
+| Component | Description |
+| ------ | ------ |
+| `ConversationList/` | Conversation list with conversation preview, search, and actions. |
+| `MessageList/` | Message list with message rendering and custom message support. |
+| `MessageInput/` | Message input box with emoji, image, file, video, and audio/video call pickers. |
+| `ChatSetting/` | Conversation settings panel for C2C and group chats. |
+| `ContactList/` | Contact list and contact detail modules. |
+| `Search/` | Global search and message search. |
+
+### Live
+
+| Component | Description |
+| ------ | ------ |
+| `LiveView/` | Live streaming view for pushing and playing streams. |
+| `LiveList/` | Live room list. |
+| `LiveScenePanel/` | Aggregated panel for live-scene feature entry points. |
+| `BarrageInput/` | Barrage input. |
+| `BarrageList/` | Barrage message list. |
+| `LiveGift/` | Gift panel and gift animation effects. |
+| `LiveAudienceList/` | Audience list. |
+| `LiveMonitorView/` | Live monitoring view. |
+| `CoGuestPanel/` | Co-guest panel. |
+| `CoHostPanel/` | Host PK panel. |
+| `StreamMixer/` | Stream mixing control. |
+
+### Room
+
+| Component | Description |
+| ------ | ------ |
+| `RoomView/` | Main audio/video room view. |
+| `RoomParticipantList/` | Participant list. |
+| `RoomParticipantView/` | Participant video view. |
+| `ScheduleRoomPanel/` | Scheduled meeting panel. |
+| `VirtualBackgroundPanel/` | Virtual background settings. |
+| `FreeBeautyPanel/` | Beauty effect settings panel. |
+| `ASRTools/` | Speech recognition tools, including subtitles and real-time transcription. |
+
+### Common
+
+| Component | Description |
+| ------ | ------ |
+| `Avatar/` | Avatar component. |
+| `UserPicker/` | User picker. |
+
+## State Management (`src/states/`)
+
+Each business domain maps to an independent state module. Every module exposes reactive data and action methods through `useXxxState()` hooks.
+
+- **Common**: `LoginState`
+- **Chat**: `ConversationListState`, `MessageListState`, `MessageInputState`, `ContactListState`, `SearchState`, `C2CSettingState`, `GroupSettingState`, `MessageActionState`
+- **Live**: `LiveListState`, `LivePlayerState`, `LiveSeatState`, `LiveGiftState`, `BarrageState`, `BattleState`, `CoGuestState`, `CoHostState`, `LiveAudienceState`, `LiveMonitorState`, `VideoMixerState`
+- **Room**: `RoomState`, `RoomParticipantState`, `DeviceState`, `AITranscriberState`, `FreeBeautyState`, `VirtualBackgroundState`
+
+## Export Strategy (`src/subEntry/`)
+
+```text
+subEntry/
+├── common/    # shared exports: LoginState, Avatar, UserPicker
+├── chat/      # chat exports: conversation, message, contact, search components and states
+├── live/      # live exports: live view, barrage, gifts, co-guest, and related states
+└── room/      # room exports: room view, participants, virtual background, and related states
+```
+
+The upper-level packages can selectively re-export modules by scenario. For example, `@tencentcloud/chat-uikit-vue3` only re-exports `common` and `chat`.
+
+## Package Entry Overview
+
+The core package in this repository is `tuikit-atomicx-vue3`, which exposes the following entry points:
+
+- `tuikit-atomicx-vue3`
+- `tuikit-atomicx-vue3/chat`
+- `tuikit-atomicx-vue3/live`
+- `tuikit-atomicx-vue3/room`
+
+This makes it easier to build scenario-specific applications while keeping imports explicit and tree-shakable.
+
+## Demo Projects (`demos/`)
+
+The `demos/` directory contains runnable sample applications and scenario showcases built on top of this component library.
+
+| Demo | Description |
+| ------ | ------ |
+| `rtcube-vite-vue3/` | A comprehensive RTC experience demo that combines multiple Tencent Cloud RTC scenarios and products, including Chat, Call, and other experience-oriented pages. It is the best starting point if you want to see how different capabilities work together in one app. |
+| `live-monitor-vue3/` | A real-time live stream monitoring demo for viewing and managing multiple live rooms concurrently. It includes both a Vue 3 frontend and a lightweight `server/` backend for monitoring-related workflows. |
+| `industry-showcase/` | A directory for vertical-industry showcases. It currently includes a medical consultation demo and shows how Chat UIKit can be customized with industry-specific UI, cards, quick replies, patient information panels, and call integration. |
diff --git a/README_ZH.md b/README_ZH.md
new file mode 100644
index 0000000..e51728f
--- /dev/null
+++ b/README_ZH.md
@@ -0,0 +1,93 @@
+# UIKit Component Vue3
+
+腾讯云 RTC UIKit 的 **Vue 3 核心组件库**，为 Chat（即时通信）、Live（互动直播）、Room（多人音视频房间）三大场景提供开箱即用的 UI 组件与响应式状态管理。
+
+## 核心能力
+
+| 能力 | 说明 |
+|------|------|
+| **场景化 UI 组件** | 覆盖 Chat、Live、Room 三大场景，每个组件可独立使用或自由组合 |
+| **响应式状态管理** | 每个组件提供细粒度的响应式数据与操作方法 |
+| **按场景导出** | 通过 `subEntry/chat`、`subEntry/live`、`subEntry/room` 按需引入，减小打包体积 |
+| **国际化** | 内置 i18next 多语言支持 |
+| **类型安全** | 完整的 TypeScript 类型定义 |
+
+## 组件目录结构 (`src/components/`)
+
+### Chat 场景
+
+| 组件 | 说明 |
+|------|------|
+| `ConversationList/` | 会话列表，包含会话预览、会话搜索、会话操作等子组件 |
+| `MessageList/` | 消息列表，包含消息渲染、自定义消息等子组件 |
+| `MessageInput/` | 消息输入框，包含表情、图片、文件、视频、音视频通话等 Picker |
+| `ChatSetting/` | 会话设置面板（C2C / 群组设置） |
+| `ContactList/` | 联系人列表与联系人详情 |
+| `Search/` | 全局搜索与消息搜索 |
+
+### Live 场景
+
+| 组件 | 说明 |
+|------|------|
+| `LiveView/` | 直播视图（推流 / 拉流） |
+| `LiveList/` | 直播间列表 |
+| `LiveScenePanel/` | 直播场景面板（功能入口聚合） |
+| `BarrageInput/` | 弹幕输入 |
+| `BarrageList/` | 弹幕消息列表 |
+| `LiveGift/` | 礼物面板与礼物动效 |
+| `LiveAudienceList/` | 观众列表 |
+| `LiveMonitorView/` | 直播监控视图 |
+| `CoGuestPanel/` | 连麦面板 |
+| `CoHostPanel/` | 主播 PK 面板 |
+| `StreamMixer/` | 混流控制 |
+
+### Room 场景
+
+| 组件 | 说明 |
+|------|------|
+| `RoomView/` | 音视频房间主视图 |
+| `RoomParticipantList/` | 参会人列表 |
+| `RoomParticipantView/` | 参会人视频视图 |
+| `ScheduleRoomPanel/` | 预约会议面板 |
+| `VirtualBackgroundPanel/` | 虚拟背景设置 |
+| `FreeBeautyPanel/` | 美颜设置面板 |
+| `ASRTools/` | 语音识别工具（字幕、实时消息转写） |
+
+### 通用组件
+
+| 组件 | 说明 |
+|------|------|
+| `Avatar/` | 头像组件 |
+| `UserPicker/` | 用户选择器 |
+
+## 状态管理 (`src/states/`)
+
+每个业务领域对应一个独立的 State 模块，通过 `useXxxState()` Hook 暴露响应式数据和操作方法：
+
+
+- **Common**: `LoginState`
+- **Chat**: `ConversationListState`、`MessageListState`、`MessageInputState`、`ContactListState`、`SearchState`、`C2CSettingState`、`GroupSettingState`、`MessageActionState`
+- **Live**: `LiveListState`、`LivePlayerState`、`LiveSeatState`、`LiveGiftState`、`BarrageState`、`BattleState`、`CoGuestState`、`CoHostState`、`LiveAudienceState`、`LiveMonitorState`、`VideoMixerState`
+- **Room**: `RoomState`、`RoomParticipantState`、`DeviceState`、`AITranscriberState`、`FreeBeautyState`、`VirtualBackgroundState`
+
+## 导出机制 (`src/subEntry/`)
+
+```
+subEntry/
+├── common/    # 通用导出：LoginState、Avatar、UserPicker
+├── chat/      # Chat 场景导出：会话、消息、联系人、搜索等组件和状态
+├── live/      # Live 场景导出：直播视图、弹幕、礼物、连麦等组件和状态
+└── room/      # Room 场景导出：房间视图、参会人、虚拟背景等组件和状态
+```
+
+上层包按场景选择性地 re-export，例如 `@tencentcloud/chat-uikit-vue3` 只导出 `common` + `chat`。
+
+## Demo 目录 (`demos/`)
+
+`demos/` 目录包含基于该组件库构建的可运行示例工程和场景化展示项目。
+
+| Demo | 说明 |
+|------|------|
+| `rtcube-vite-vue3/` | 综合性的 RTC 体验 Demo，聚合了腾讯云 RTC 多种场景与产品能力，包括 Chat、Call 以及其他体验型页面。适合作为理解整体接入方式的首个入口。 |
+| `live-monitor-vue3/` | 实时直播监播 Demo，用于并发查看和管理多个直播间。项目同时包含 Vue 3 前端和轻量级 `server/` 后端，适合参考监播类业务流程。 |
+| `industry-showcase/` | 行业化展示 Demo 目录，当前包含医疗问诊等垂直场景示例，演示如何基于 Chat UIKit 做行业定制，例如主题 UI、自定义卡片、快捷回复、患者信息面板和音视频通话集成。 |
diff --git a/demos/industry-showcase/chat-medical-vue3/README.md b/demos/industry-showcase/chat-medical-vue3/README.md
new file mode 100644
index 0000000..28df866
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/README.md
@@ -0,0 +1,64 @@
+# Medical Chat Showroom
+
+A standalone medical consultation chat demo built with [Tencent Cloud Chat UIKit](https://www.tencentcloud.com/document/product/1047).
+
+This project demonstrates how to customize Chat UIKit for the **medical consultation** vertical industry, featuring:
+
+- 🏥 Medical-themed UI (green primary color)
+- 📋 Medical record cards & prescription cards
+- 💬 Quick reply & rating pickers
+- 🩺 Patient info panel
+- 📞 Audio/Video call integration
+- 🔍 Conversation status filter (Pending / In Progress / Completed)
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js >= 18
+- pnpm (recommended) or npm
+
+### 1. Install dependencies
+
+```bash
+pnpm install
+```
+
+### 2. Get credentials
+
+Go to [IM Console](https://console.cloud.tencent.com/im) to get:
+- **SDKAppID**
+- **UserID**
+- **UserSig** (generate from [UserSig Tool](https://console.cloud.tencent.com/im/tool-usersig))
+
+### 3. Run
+
+```bash
+pnpm dev
+```
+
+Open the browser, enter your credentials, and start chatting!
+
+## Project Structure
+
+```
+src/
+├── App.vue                     # Login/Chat state machine
+├── MedicalChat.vue             # Main medical chat layout
+├── components/
+│   ├── Login.vue               # Login form
+│   ├── SideTab/                # Side navigation (conversation/contact tabs)
+│   └── Medical/
+│       ├── cards/              # Custom message cards (record, prescription, rating)
+│       ├── pickers/            # Toolbar pickers (quick reply, prescription, etc.)
+│       ├── ConversationFilterBar.vue
+│       ├── MedicalChatSetting.vue
+│       ├── MedicalConversationPreview.vue
+│       ├── MedicalConversationTitle.vue
+│       ├── MedicalMessageRenderer.vue
+│       └── PatientInfoPanel.vue
+```
+
+## License
+
+MIT
diff --git a/demos/industry-showcase/chat-medical-vue3/index.html b/demos/industry-showcase/chat-medical-vue3/index.html
new file mode 100644
index 0000000..1dd02ff
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Medical Chat Showroom</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/industry-showcase/chat-medical-vue3/package.json b/demos/industry-showcase/chat-medical-vue3/package.json
new file mode 100644
index 0000000..848e12e
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "showroom-chat-medical",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.31",
+    "@tencentcloud/chat-uikit-vue3": "^5.5.0",
+    "@tencentcloud/uikit-base-component-vue3": "^1.4.0",
+    "@trtc/calls-uikit-vue": "^4.4.0",
+    "lucide-vue-next": "^1.0.0",
+    "tdesign-vue-next": "^1.18.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "sass": "^1.77.8",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4",
+    "vue-tsc": "^2.0.24"
+  }
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/src/App.vue b/demos/industry-showcase/chat-medical-vue3/src/App.vue
new file mode 100644
index 0000000..dd8a9cf
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/App.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { medicalLanguageResources } from './locales';
+import Login from './components/Login.vue';
+import MedicalChat from './MedicalChat.vue';
+
+const MEDICAL_THEME = { themeStyle: 'light', primaryColor: '#2ba471' };
+
+const isLoggedIn = ref(false);
+const currentLanguage = ref('zh-CN');
+
+const handleLoginSuccess = () => {
+  isLoggedIn.value = true;
+};
+
+const handleLanguageChange = (lng: string) => {
+  currentLanguage.value = lng;
+};
+</script>
+
+<template>
+  <UIKitProvider :theme="MEDICAL_THEME" :language-resources="medicalLanguageResources" :language="currentLanguage">
+    <Login v-if="!isLoggedIn" @success="handleLoginSuccess" @language-change="handleLanguageChange" />
+    <MedicalChat v-else />
+  </UIKitProvider>
+</template>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/MedicalChat.vue b/demos/industry-showcase/chat-medical-vue3/src/MedicalChat.vue
new file mode 100644
index 0000000..3cd99c0
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/MedicalChat.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import {
+  ConversationList,
+  ContactList,
+  ContactInfo,
+  Chat,
+  MessageList,
+  MessageInput,
+  MessageType,
+  useUIKit,
+  ChatHeader,
+  useConversationListState,
+} from '@tencentcloud/chat-uikit-vue3';
+import { IconMenu } from '@tencentcloud/uikit-base-component-vue3';
+import { TUICallKit } from '@trtc/calls-uikit-vue';
+import ConversationFilterBar from './components/Medical/ConversationFilterBar.vue';
+import MedicalChatSetting from './components/Medical/MedicalChatSetting.vue';
+import MedicalConversationPreview from './components/Medical/MedicalConversationPreview.vue';
+import MedicalMessageRenderer from './components/Medical/MedicalMessageRenderer.vue';
+import MedicalAudioCallPicker from './components/Medical/pickers/MedicalAudioCallPicker.vue';
+import MedicalEmojiPicker from './components/Medical/pickers/MedicalEmojiPicker.vue';
+import MedicalFilePicker from './components/Medical/pickers/MedicalFilePicker.vue';
+import MedicalImagePicker from './components/Medical/pickers/MedicalImagePicker.vue';
+import MedicalRecordPicker from './components/Medical/pickers/MedicalRecordPicker.vue';
+import MedicalVideoCallPicker from './components/Medical/pickers/MedicalVideoCallPicker.vue';
+import MedicalVideoPicker from './components/Medical/pickers/MedicalVideoPicker.vue';
+import PrescriptionPicker from './components/Medical/pickers/PrescriptionPicker.vue';
+import QuickRatePicker from './components/Medical/pickers/QuickRatePicker.vue';
+import QuickReplyPicker from './components/Medical/pickers/QuickReplyPicker.vue';
+import { SideTab } from './components/SideTab';
+import type { FilterType } from './components/Medical/ConversationFilterBar.vue';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const medicalRenderers = {
+  [MessageType.CUSTOM]: MedicalMessageRenderer,
+};
+
+// Hash function to derive mock status from conversationID (same as MedicalConversationTitle)
+const getMockStatus = (id: string): string => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = ((hash << 5) - hash) + id.charCodeAt(i);
+  }
+  const statuses = ['待问诊', '问诊中', '已结束'];
+  return statuses[Math.abs(hash) % 3];
+};
+
+const statusFilter = ref<FilterType>('all');
+
+const conversationFilter = computed(() => {
+  if (statusFilter.value === 'all') {
+    return undefined;
+  }
+  const statusMap: Record<string, string> = {
+    pending: '待问诊',
+    active: '问诊中',
+    done: '已结束',
+  };
+  const target = statusMap[statusFilter.value];
+  return (list: ConversationModel[]) =>
+    list.filter(c => getMockStatus(c.conversationID) === target);
+});
+
+const handleFilterChange = (filter: FilterType) => {
+  statusFilter.value = filter;
+};
+
+const activeTab = ref<'conversation' | 'contact'>('conversation');
+const activeContact = ref();
+const isChatSettingShow = ref(false);
+
+const { t, theme } = useUIKit();
+const { activeConversation } = useConversationListState();
+
+watch(() => activeConversation.value?.conversationID, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    isChatSettingShow.value = false;
+  }
+});
+
+const handleTabChange = (tab: 'conversation' | 'contact') => {
+  activeTab.value = tab;
+};
+
+const enterChat = () => {
+  activeTab.value = 'conversation';
+};
+</script>
+
+<template>
+  <div class="medical-chat-layout">
+    <TUICallKit class="call-kit" />
+
+    <!-- SideTab Navigation -->
+    <SideTab
+      :active-tab="activeTab"
+      @change="handleTabChange"
+    />
+
+    <!-- Conversation/Contact List Panel -->
+    <div class="medical-conversation-panel">
+      <ConversationFilterBar
+        v-show="activeTab === 'conversation'"
+        @change="handleFilterChange"
+      />
+      <ConversationList
+        v-show="activeTab === 'conversation'"
+        :Preview="MedicalConversationPreview"
+        :filter="conversationFilter"
+        enable-create
+      />
+      <ContactList v-show="activeTab === 'contact'" />
+    </div>
+
+    <!-- Chat Content Panel (conversation tab) -->
+    <div v-if="activeTab === 'conversation'" class="medical-chat-content">
+      <Chat class="medical-chat-inner">
+        <ChatHeader>
+          <template #ChatHeaderRight>
+            <button
+              class="icon-button"
+              :title="t('chat.Setting')"
+              @click="isChatSettingShow = !isChatSettingShow"
+            >
+              <IconMenu size="20" />
+            </button>
+          </template>
+        </ChatHeader>
+        <MessageList :messageRenderers="medicalRenderers" />
+        <MessageInput class="medical-message-input">
+          <template #headerToolbar>
+            <div class="medical-toolbar">
+              <div class="medical-toolbar-actions">
+                <MedicalEmojiPicker />
+                <MedicalImagePicker />
+                <MedicalFilePicker />
+                <MedicalVideoPicker />
+                <MedicalAudioCallPicker />
+                <MedicalVideoCallPicker />
+                <MedicalRecordPicker />
+                <PrescriptionPicker />
+                <QuickReplyPicker />
+                <QuickRatePicker />
+              </div>
+            </div>
+          </template>
+        </MessageInput>
+      </Chat>
+
+      <!-- Medical Chat Setting Sidebar -->
+      <div
+        v-show="isChatSettingShow"
+        class="medical-sidebar"
+        :class="{ dark: theme === 'dark' }"
+      >
+        <MedicalChatSetting @close="isChatSettingShow = false" />
+      </div>
+    </div>
+
+    <!-- Contact Detail Panel (contact tab) -->
+    <ContactInfo
+      v-else
+      :active-contact-item="activeContact"
+      class="medical-contact-detail"
+      @send-message="enterChat"
+      @enter-group="enterChat"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.medical-chat-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  background-color: var(--bg-color-operate);
+  color: var(--text-color-primary);
+}
+
+.call-kit {
+  position: fixed;
+  width: 800px;
+  height: 600px;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+}
+
+.medical-conversation-panel {
+  width: 298px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 0;
+  border-right: 1px solid var(--stroke-color-primary);
+}
+
+.medical-chat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  min-width: 0;
+  position: relative;
+}
+
+.medical-chat-inner {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.medical-contact-detail {
+  height: auto;
+}
+
+.medical-message-input {
+  border-top: 1px solid var(--stroke-color-primary);
+}
+
+.medical-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.medical-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.icon-button {
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 20px;
+  color: var(--text-color-primary);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  outline: none;
+
+  &:focus { outline: none; }
+  &:hover { background-color: var(--button-color-secondary-hover); }
+  &:active { background-color: var(--button-color-secondary-active); }
+}
+
+.medical-sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: 358px;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+  box-shadow: 0 1px 5px var(--shadow-color), 0 8px 12px var(--shadow-color), 0 12px 26px var(--shadow-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 1000;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &.dark {
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4), -1px 0 0 rgba(255, 255, 255, 0.1);
+  }
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Login.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Login.vue
new file mode 100644
index 0000000..b23bd0a
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Login.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useLoginState, useUIKit } from '@tencentcloud/chat-uikit-vue3';
+
+const { login } = useLoginState();
+const { t, language, setLanguage } = useUIKit();
+
+const sdkAppId = ref('');
+const userId = ref('');
+const userSig = ref('');
+const loading = ref(false);
+const error = ref('');
+
+const emit = defineEmits<{
+  success: [];
+  languageChange: [lng: string];
+}>();
+
+const toggleLanguage = () => {
+  const next = language.value === 'zh-CN' ? 'en-US' : 'zh-CN';
+  setLanguage(next);
+  emit('languageChange', next);
+};
+
+const handleLogin = async () => {
+  if (!sdkAppId.value || !userId.value || !userSig.value) {
+    error.value = t('medical.login.error.emptyFields');
+    return;
+  }
+
+  loading.value = true;
+  error.value = '';
+
+  try {
+    await login({
+      sdkAppId: Number(sdkAppId.value),
+      userId: userId.value,
+      userSig: userSig.value,
+      useUploadPlugin: true,
+    });
+    emit('success');
+  } catch (err: any) {
+    error.value = err?.message || t('medical.login.error.failed');
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="login-page">
+    <div class="login-card">
+      <button class="lang-toggle" @click="toggleLanguage">
+        {{ language === 'zh-CN' ? 'English' : '中文' }}
+      </button>
+      <div class="login-header">
+        <h1 class="login-title">{{ t('medical.login.title') }}</h1>
+        <p class="login-subtitle">{{ t('medical.login.subtitle') }}</p>
+      </div>
+
+      <div class="login-form">
+        <div class="form-field">
+          <label class="form-label">{{ t('medical.login.sdkAppId') }}</label>
+          <input
+            v-model="sdkAppId"
+            class="form-input"
+            type="text"
+            :placeholder="t('medical.login.sdkAppIdPlaceholder')"
+            @keyup.enter="handleLogin"
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">{{ t('medical.login.userId') }}</label>
+          <input
+            v-model="userId"
+            class="form-input"
+            type="text"
+            :placeholder="t('medical.login.userIdPlaceholder')"
+            @keyup.enter="handleLogin"
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">{{ t('medical.login.userSig') }}</label>
+          <textarea
+            v-model="userSig"
+            class="form-input form-textarea"
+            :placeholder="t('medical.login.userSigPlaceholder')"
+            rows="3"
+          />
+        </div>
+
+        <p v-if="error" class="form-error">{{ error }}</p>
+
+        <button
+          class="login-btn"
+          :disabled="loading"
+          @click="handleLogin"
+        >
+          {{ loading ? t('medical.login.loading') : t('medical.login.submit') }}
+        </button>
+      </div>
+
+      <p class="login-hint">
+        {{ t('medical.login.hint').split('<1>')[0] }}
+        <a href="https://console.cloud.tencent.com/im" target="_blank">
+          IM Console
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%);
+}
+
+.login-card {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  position: relative;
+}
+
+.lang-toggle {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  background: #f3f4f6;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.lang-toggle:hover {
+  color: #0ABF77;
+  background: rgba(10, 191, 119, 0.08);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0ABF77;
+  margin: 0 0 8px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input {
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+  font-family: inherit;
+}
+
+.form-input:focus {
+  border-color: #0ABF77;
+  box-shadow: 0 0 0 3px rgba(10, 191, 119, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+
+.form-error {
+  color: #dc2626;
+  font-size: 13px;
+  margin: 0;
+}
+
+.login-btn {
+  padding: 12px;
+  background: #0ABF77;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.login-btn:hover:not(:disabled) {
+  background: #09a868;
+}
+
+.login-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.login-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  margin: 20px 0 0;
+}
+
+.login-hint a {
+  color: #0ABF77;
+  text-decoration: none;
+}
+
+.login-hint a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/ConversationFilterBar.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/ConversationFilterBar.vue
new file mode 100644
index 0000000..c18c568
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/ConversationFilterBar.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useUIKit } from '@tencentcloud/chat-uikit-vue3';
+
+export type FilterType = 'all' | 'pending' | 'active' | 'done';
+
+const { t } = useUIKit();
+
+const emit = defineEmits<{
+  change: [filter: FilterType];
+}>();
+
+const activeFilter = ref<FilterType>('all');
+
+const filterIds: FilterType[] = ['all', 'pending', 'active', 'done'];
+
+const filterLabelKey: Record<FilterType, string> = {
+  all: 'medical.filter.all',
+  pending: 'medical.filter.pending',
+  active: 'medical.filter.active',
+  done: 'medical.filter.done',
+};
+
+const handleChange = (id: FilterType) => {
+  activeFilter.value = id;
+  emit('change', id);
+};
+</script>
+
+<template>
+  <div class="filter-bar">
+    <button
+      v-for="id in filterIds"
+      :key="id"
+      class="filter-bar__item"
+      :class="{ 'filter-bar__item--active': activeFilter === id }"
+      @click="handleChange(id)"
+    >
+      {{ t(filterLabelKey[id]) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.filter-bar {
+  display: flex;
+  gap: 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--stroke-color-primary, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.filter-bar__item {
+  padding: 3px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-color-secondary, #6b7280);
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.filter-bar__item:hover {
+  background: var(--list-color-hover, #f9fafb);
+}
+
+.filter-bar__item--active {
+  background: rgba(10, 191, 119, 0.1);
+  color: #0ABF77;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalChatSetting.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalChatSetting.vue
new file mode 100644
index 0000000..7a0626a
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalChatSetting.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  ChatSetting,
+  ConversationType,
+  useConversationListState,
+} from '@tencentcloud/chat-uikit-vue3';
+import PatientInfoPanel from './PatientInfoPanel.vue';
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { activeConversation } = useConversationListState();
+const isC2C = computed(() => activeConversation.value?.type === ConversationType.C2C);
+</script>
+
+<template>
+  <PatientInfoPanel
+    v-if="isC2C"
+    @close="emit('close')"
+  />
+  <ChatSetting
+    v-else
+    @close="emit('close')"
+  />
+</template>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationPreview.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationPreview.vue
new file mode 100644
index 0000000..ee9ece0
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationPreview.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ConversationPreviewUI } from '@tencentcloud/chat-uikit-vue3';
+import MedicalConversationTitle from './MedicalConversationTitle.vue';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  conversation: ConversationModel;
+  isSelected?: boolean;
+  enableActions?: boolean;
+  Avatar?: any;
+  Title?: any;
+  LastMessageAbstract?: any;
+  LastMessageTimestamp?: any;
+  Unread?: any;
+  ConversationActions?: any;
+  actionsConfig?: any;
+  className?: string;
+  style?: any;
+}>();
+
+const emit = defineEmits<{
+  selectConversation: [conversation: ConversationModel];
+}>();
+</script>
+
+<template>
+  <ConversationPreviewUI
+    :conversation="props.conversation"
+    :is-selected="props.isSelected"
+    :enable-actions="props.enableActions"
+    :Avatar="props.Avatar"
+    :Title="MedicalConversationTitle"
+    :LastMessageAbstract="props.LastMessageAbstract"
+    :LastMessageTimestamp="props.LastMessageTimestamp"
+    :Unread="props.Unread"
+    :ConversationActions="props.ConversationActions"
+    :actions-config="props.actionsConfig"
+    :class-name="props.className"
+    :style="props.style"
+    @select-conversation="(c: ConversationModel) => emit('selectConversation', c)"
+  />
+</template>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationTitle.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationTitle.vue
new file mode 100644
index 0000000..c727812
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalConversationTitle.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+}>();
+
+const title = computed(() => props.conversation?.getShowName?.() || '');
+
+// Mock patient data from conversationID hash (demo only)
+const mockData = computed(() => {
+  const id = props.conversation?.conversationID || '';
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = ((hash << 5) - hash) + id.charCodeAt(i);
+  }
+  const absHash = Math.abs(hash);
+  const age = 20 + (absHash % 50);
+  const genders = ['男', '女'];
+  const gender = genders[absHash % 2];
+  const statuses = ['待问诊', '问诊中', '已结束'] as const;
+  const status = statuses[absHash % 3];
+  return { age, gender, status };
+});
+
+const statusClass = computed(() => {
+  switch (mockData.value.status) {
+    case '待问诊': return 'medical-title__status--pending';
+    case '问诊中': return 'medical-title__status--active';
+    case '已结束': return 'medical-title__status--done';
+    default: return '';
+  }
+});
+</script>
+
+<template>
+  <div class="medical-title">
+    <span class="medical-title__name">{{ title }}</span>
+    <span class="medical-title__badge">{{ mockData.gender }} {{ mockData.age }}岁</span>
+    <span class="medical-title__status" :class="statusClass">{{ mockData.status }}</span>
+  </div>
+</template>
+
+<style scoped>
+.medical-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.medical-title__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.medical-title__badge {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-weight: 500;
+  border-radius: 4px;
+  background: rgba(10, 191, 119, 0.1);
+  color: #0ABF77;
+  white-space: nowrap;
+}
+
+.medical-title__status {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-weight: 500;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.medical-title__status--pending {
+  background: #fef3c7;
+  color: #a16207;
+}
+
+.medical-title__status--active {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.medical-title__status--done {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalMessageRenderer.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalMessageRenderer.vue
new file mode 100644
index 0000000..850ed74
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/MedicalMessageRenderer.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { CustomMessage } from '@tencentcloud/chat-uikit-vue3';
+import MedicalRateCard from './cards/MedicalRateCard.vue';
+import MedicalRecordCard from './cards/MedicalRecordCard.vue';
+import PrescriptionCard from './cards/PrescriptionCard.vue';
+import { MEDICAL_BUSINESS_ID } from './constants';
+
+interface Props {
+  message: any;
+}
+
+const props = defineProps<Props>();
+
+const parsedData = computed(() => {
+  try {
+    const { payload } = props.message;
+    return JSON.parse(payload?.data || '{}');
+  } catch {
+    return {};
+  }
+});
+
+const businessID = computed(() => parsedData.value?.businessID);
+</script>
+
+<template>
+  <MedicalRecordCard
+    v-if="businessID === MEDICAL_BUSINESS_ID.MEDICAL_RECORD"
+    :date="parsedData.date"
+    :patient-name="parsedData.patientName"
+    :gender="parsedData.gender"
+    :age="parsedData.age"
+    :department="parsedData.department"
+    :status="parsedData.status || 'completed'"
+    :chief-complaint="parsedData.chiefComplaint"
+    :diagnosis="parsedData.diagnosis"
+  />
+
+  <!-- Prescription card -->
+  <PrescriptionCard
+    v-else-if="businessID === MEDICAL_BUSINESS_ID.PRESCRIPTION"
+    :prescription-no="parsedData.prescriptionNo"
+    :date="parsedData.date"
+    :patient-name="parsedData.patientName"
+    :gender="parsedData.gender"
+    :age="parsedData.age"
+    :doctor-name="parsedData.doctorName"
+    :department="parsedData.department"
+    :diagnosis="parsedData.diagnosis"
+    :medications="parsedData.medications || []"
+    :notes="parsedData.notes"
+  />
+
+  <MedicalRateCard
+    v-else-if="businessID === MEDICAL_BUSINESS_ID.RATING"
+    :rate="parsedData.rate"
+  />
+
+  <!-- Fallback for unknown custom messages -->
+  <CustomMessage v-else :message="message" />
+</template>
+
+<style scoped>
+.medical-custom-default {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-color-default, #f5f5f5);
+  color: var(--text-color-primary);
+  font-size: 13px;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/PatientInfoPanel.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/PatientInfoPanel.vue
new file mode 100644
index 0000000..c2fd541
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/PatientInfoPanel.vue
@@ -0,0 +1,489 @@
+<script setup lang="ts">
+import { useC2CSettingState, Avatar } from '@tencentcloud/chat-uikit-vue3';
+import {
+  Activity,
+  Phone,
+  AlertCircle,
+  Calendar,
+  FileText,
+  Clock,
+} from 'lucide-vue-next';
+
+const { nick, avatar } = useC2CSettingState();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+// Mock patient data - in real app this comes from medical system API
+const patient = {
+  name: nick.value,
+  avatar: avatar.value,
+  gender: '女',
+  age: 32,
+  patientId: 'P2024-1086',
+  status: '在诊',
+  phone: '138-8888-8888',
+  emergencyContact: '李明 (丈夫) · 139-9999-9999',
+  bloodType: 'A型',
+  visitCount: 12,
+  allergies: ['青霉素', '海鲜'],
+  currentVisit: {
+    department: '心内科',
+    registrationTime: '2024-04-02 09:30',
+    doctor: '张医生',
+  },
+  lastUpdated: '2024-04-02 10:15',
+};
+
+const handleViewRecords = () => {
+  console.log('[PatientInfoPanel] View full medical records', patient.avatar);
+};
+</script>
+
+<template>
+  <div class="patient-panel">
+    <!-- Title bar -->
+    <div class="patient-panel__title-bar">
+      <span class="patient-panel__title-text">患者详情</span>
+      <button class="patient-panel__close-btn" @click="emit('close')">
+        ✕
+      </button>
+    </div>
+
+    <!-- Header - Patient basic info -->
+    <div class="patient-panel__header">
+      <div class="patient-panel__header-inner">
+        <Avatar :size="56" :src="patient.avatar" />
+        <div class="patient-panel__info">
+          <div class="patient-panel__name-row">
+            <h2 class="patient-panel__name">
+              {{ patient.name }}
+            </h2>
+            <span class="patient-panel__status-tag">{{ patient.status }}</span>
+          </div>
+          <div class="patient-panel__meta">
+            <span>{{ patient.gender }}</span>
+            <span class="patient-panel__dot" />
+            <span>{{ patient.age }}岁</span>
+            <span class="patient-panel__dot" />
+            <span>ID: {{ patient.patientId }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Contact info -->
+    <div class="patient-panel__section">
+      <div class="patient-panel__contact-item">
+        <div class="patient-panel__contact-icon">
+          <Phone :size="16" />
+        </div>
+        <div class="patient-panel__contact-text">
+          <p class="patient-panel__contact-label">
+            联系电话
+          </p>
+          <p class="patient-panel__contact-value">
+            {{ patient.phone }}
+          </p>
+        </div>
+      </div>
+      <div class="patient-panel__contact-item">
+        <div class="patient-panel__contact-icon">
+          <AlertCircle :size="16" />
+        </div>
+        <div class="patient-panel__contact-text">
+          <p class="patient-panel__contact-label">
+            紧急联系人
+          </p>
+          <p class="patient-panel__contact-value">
+            {{ patient.emergencyContact }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Medical info -->
+    <div class="patient-panel__section">
+      <h3 class="patient-panel__section-title">
+        <Activity :size="16" class="patient-panel__section-icon" />
+        医疗信息
+      </h3>
+      <div class="patient-panel__grid">
+        <div class="patient-panel__grid-item">
+          <p class="patient-panel__grid-label">
+            血型
+          </p>
+          <p class="patient-panel__grid-value">
+            {{ patient.bloodType }}
+          </p>
+        </div>
+        <div class="patient-panel__grid-item">
+          <p class="patient-panel__grid-label">
+            就诊次数
+          </p>
+          <p class="patient-panel__grid-value">
+            {{ patient.visitCount }}次
+          </p>
+        </div>
+        <div class="patient-panel__grid-item patient-panel__grid-item--full">
+          <p class="patient-panel__grid-label">
+            过敏史
+          </p>
+          <div class="patient-panel__allergy-tags">
+            <span
+              v-for="allergy in patient.allergies"
+              :key="allergy"
+              class="patient-panel__allergy-tag"
+            >
+              {{ allergy }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Current visit -->
+    <div class="patient-panel__section patient-panel__section--muted">
+      <h3 class="patient-panel__section-title">
+        当前就诊
+      </h3>
+      <div class="patient-panel__visit-list">
+        <div class="patient-panel__visit-row">
+          <span class="patient-panel__visit-label">
+            <Clock :size="14" />
+            就诊科室
+          </span>
+          <span class="patient-panel__visit-value">{{ patient.currentVisit.department }}</span>
+        </div>
+        <div class="patient-panel__visit-row">
+          <span class="patient-panel__visit-label">
+            <Calendar :size="14" />
+            挂号时间
+          </span>
+          <span class="patient-panel__visit-value">{{ patient.currentVisit.registrationTime }}</span>
+        </div>
+        <div class="patient-panel__visit-row">
+          <span class="patient-panel__visit-label">主诊医生</span>
+          <span class="patient-panel__visit-value">{{ patient.currentVisit.doctor }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action buttons -->
+    <div class="patient-panel__actions">
+      <button class="patient-panel__btn patient-panel__btn--primary" @click="handleViewRecords">
+        <FileText :size="16" />
+        查看完整病历
+      </button>
+      <div class="patient-panel__btn-row">
+        <button class="patient-panel__btn patient-panel__btn--outline">
+          预约挂号
+        </button>
+        <button class="patient-panel__btn patient-panel__btn--outline">
+          缴费记录
+        </button>
+      </div>
+    </div>
+
+    <!-- Footer timestamp -->
+    <div class="patient-panel__footer">
+      最后更新: {{ patient.lastUpdated }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.patient-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+}
+
+.patient-panel__title-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 1px solid #f3f4f6;
+  flex-shrink: 0;
+}
+
+.patient-panel__title-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.patient-panel__close-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.patient-panel__close-btn:hover {
+  background: #f3f4f6;
+}
+
+.patient-panel__header {
+  padding: 20px;
+}
+
+.patient-panel__header-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.patient-panel__avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.patient-panel__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.patient-panel__name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.patient-panel__name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.patient-panel__status-tag {
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.patient-panel__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+.patient-panel__dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.patient-panel__section {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f3f4f6;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.patient-panel__section--muted {
+  background: rgba(0, 0, 0, 0.015);
+}
+
+.patient-panel__section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.patient-panel__section-icon {
+  color: #0ABF77;
+}
+
+.patient-panel__contact-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.patient-panel__contact-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.patient-panel__contact-text {
+  flex: 1;
+}
+
+.patient-panel__contact-label {
+  font-size: 11px;
+  color: #9ca3af;
+  margin: 0 0 2px;
+}
+
+.patient-panel__contact-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: #111827;
+  margin: 0;
+}
+
+.patient-panel__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.patient-panel__grid-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.patient-panel__grid-item--full {
+  grid-column: 1 / -1;
+}
+
+.patient-panel__grid-label {
+  font-size: 11px;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.patient-panel__grid-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+
+.patient-panel__allergy-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.patient-panel__allergy-tag {
+  padding: 4px 10px;
+  background: rgba(239, 68, 68, 0.08);
+  color: #dc2626;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid rgba(239, 68, 68, 0.15);
+}
+
+.patient-panel__visit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.patient-panel__visit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+}
+
+.patient-panel__visit-label {
+  color: #9ca3af;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.patient-panel__visit-value {
+  font-weight: 500;
+  color: #111827;
+}
+
+.patient-panel__actions {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.patient-panel__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s ease;
+}
+
+.patient-panel__btn--primary {
+  background: #0ABF77;
+  color: #fff;
+  box-shadow: 0 1px 3px rgba(10, 191, 119, 0.2);
+}
+
+.patient-panel__btn--primary:hover {
+  background: #09a868;
+}
+
+.patient-panel__btn-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.patient-panel__btn--outline {
+  background: #fff;
+  color: #374151;
+  border: 1px solid rgba(10, 191, 119, 0.2);
+}
+
+.patient-panel__btn--outline:hover {
+  background: #f9fafb;
+}
+
+.patient-panel__footer {
+  padding: 10px 20px;
+  background: rgba(0, 0, 0, 0.015);
+  border-top: 1px solid #f3f4f6;
+  font-size: 11px;
+  color: #9ca3af;
+  text-align: center;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRateCard.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRateCard.vue
new file mode 100644
index 0000000..69d7f5d
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRateCard.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Star } from 'lucide-vue-next';
+import { Rate as TRate } from 'tdesign-vue-next';
+
+const props = defineProps<{
+  rate: number;
+}>();
+
+</script>
+
+<template>
+  <div class="rate-card">
+    <div class="rate-card__header">
+      <div class="rate-card__header-left">
+        <Star :size="16" />
+        <span>本次咨询评价</span>
+      </div>
+    </div>
+    <div class="rate-card__body">
+      <TRate
+        :value="props.rate"
+        disabled
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rate-card {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(10, 191, 119, 0.15);
+  background: #fff;
+}
+
+.rate-card__header {
+  padding: 10px 14px;
+  background: rgba(10, 191, 119, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0ABF77;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.rate-card__header-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rate-card__body {
+  padding: 20px 50px;
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRecordCard.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRecordCard.vue
new file mode 100644
index 0000000..7cfe69d
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/MedicalRecordCard.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { FileText } from 'lucide-vue-next';
+
+const props = defineProps<{
+  date: string;
+  patientName: string;
+  gender: string;
+  age: number;
+  department: string;
+  status: 'completed' | 'in-progress';
+  chiefComplaint: string;
+  diagnosis: string;
+}>();
+
+const initial = computed(() => props.patientName.charAt(0));
+const statusText = computed(() => props.status === 'completed' ? '已完成' : '进行中');
+
+const handleViewDetails = () => {
+  // In real scenario this opens the full EMR record
+  console.log('[MedicalRecordCard] View details for', props.patientName, props.date);
+};
+</script>
+
+<template>
+  <div class="record-card">
+    <!-- Header -->
+    <div class="record-card__header">
+      <div class="record-card__header-left">
+        <FileText :size="16" />
+        <span>就诊记录</span>
+      </div>
+      <span class="record-card__date">{{ date }}</span>
+    </div>
+
+    <!-- Body -->
+    <div class="record-card__body">
+      <!-- Patient Info -->
+      <div class="record-card__patient">
+        <div class="record-card__avatar">
+          {{ initial }}
+        </div>
+        <span class="record-card__name">{{ patientName }}</span>
+        <span class="record-card__tag">{{ gender }}</span>
+        <span class="record-card__tag">{{ age }}岁</span>
+      </div>
+
+      <!-- Tags -->
+      <div class="record-card__tags">
+        <span class="record-card__dept">{{ department }}</span>
+        <span
+          class="record-card__status"
+          :class="status === 'completed' ? 'record-card__status--done' : 'record-card__status--progress'"
+        >
+          {{ statusText }}
+        </span>
+      </div>
+
+      <div class="record-card__divider" />
+
+      <!-- Chief Complaint -->
+      <div class="record-card__field">
+        <div class="record-card__label">
+          主诉
+        </div>
+        <div class="record-card__value">
+          {{ chiefComplaint }}
+        </div>
+      </div>
+
+      <!-- Diagnosis -->
+      <div class="record-card__field">
+        <div class="record-card__label">
+          诊断
+        </div>
+        <div class="record-card__value record-card__value--accent">
+          {{ diagnosis }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="record-card__footer">
+      <button class="record-card__detail-btn" @click="handleViewDetails">
+        查看详情
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.record-card {
+  width: 300px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(10, 191, 119, 0.15);
+  background: #fff;
+}
+
+.record-card__header {
+  padding: 10px 14px;
+  background: rgba(10, 191, 119, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0ABF77;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.record-card__header-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.record-card__date {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.record-card__body {
+  padding: 12px 14px;
+  background: #FAFFFE;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.record-card__patient {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.record-card__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #0ABF77;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.record-card__name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.record-card__tag {
+  padding: 1px 6px;
+  background: #f3f4f6;
+  color: #374151;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.record-card__tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.record-card__dept {
+  padding: 2px 8px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.record-card__status {
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.record-card__status--done {
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.record-card__status--progress {
+  background: #fefce8;
+  color: #a16207;
+}
+
+.record-card__divider {
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.record-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.record-card__label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.record-card__value {
+  font-size: 13px;
+  color: #111827;
+}
+
+.record-card__value--accent {
+  color: #0ABF77;
+  font-weight: 500;
+}
+
+.record-card__footer {
+  padding: 6px 14px;
+  background: #fff;
+  border-top: 1px solid #f3f4f6;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.record-card__detail-btn {
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 3px 0;
+}
+
+.record-card__detail-btn:hover {
+  color: #0ABF77;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/PrescriptionCard.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/PrescriptionCard.vue
new file mode 100644
index 0000000..c092013
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/cards/PrescriptionCard.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { FileText } from 'lucide-vue-next';
+
+interface Medication {
+  name: string;
+  specification: string;
+  dosage: string;
+  frequency: string;
+  duration: string;
+}
+
+const props = defineProps<{
+  prescriptionNo: string;
+  date: string;
+  patientName: string;
+  gender: string;
+  age: number;
+  doctorName: string;
+  department: string;
+  diagnosis: string;
+  medications: Medication[];
+  notes?: string;
+}>();
+
+const initial = computed(() => props.patientName.charAt(0));
+
+const handleViewDetails = () => {
+  console.log('[PrescriptionCard] View details for', props.prescriptionNo);
+};
+</script>
+
+<template>
+  <div class="rx-card">
+    <!-- Header -->
+    <div class="rx-card__header">
+      <div class="rx-card__header-left">
+        <FileText :size="16" />
+        <span>处方单</span>
+      </div>
+      <span class="rx-card__date">{{ date }}</span>
+    </div>
+
+    <!-- Body -->
+    <div class="rx-card__body">
+      <!-- Patient Info -->
+      <div class="rx-card__patient-row">
+        <div class="rx-card__patient-info">
+          <div class="rx-card__avatar">
+            {{ initial }}
+          </div>
+          <div class="rx-card__patient-meta">
+            <div class="rx-card__patient-name-row">
+              <span class="rx-card__name">{{ patientName }}</span>
+              <span class="rx-card__tag">{{ gender }}</span>
+              <span class="rx-card__tag">{{ age }}岁</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Prescription Number -->
+      <div class="rx-card__rx-no">
+        处方编号：{{ prescriptionNo }}
+      </div>
+
+      <div class="rx-card__divider" />
+
+      <!-- Doctor & Department -->
+      <div class="rx-card__doctor-row">
+        <div class="rx-card__doctor-item">
+          <span class="rx-card__label">医生：</span>
+          <span class="rx-card__value">{{ doctorName }}</span>
+        </div>
+        <div class="rx-card__doctor-item">
+          <span class="rx-card__label">科室：</span>
+          <span class="rx-card__dept">{{ department }}</span>
+        </div>
+      </div>
+
+      <!-- Diagnosis -->
+      <div class="rx-card__field">
+        <div class="rx-card__label">
+          诊断
+        </div>
+        <div class="rx-card__diagnosis">
+          {{ diagnosis }}
+        </div>
+      </div>
+
+      <div class="rx-card__divider" />
+
+      <!-- Medications -->
+      <div class="rx-card__field">
+        <div class="rx-card__label rx-card__label--mb">
+          药品清单
+        </div>
+        <div class="rx-card__med-list">
+          <div
+            v-for="(med, idx) in medications"
+            :key="idx"
+            class="rx-card__med-item"
+          >
+            <div class="rx-card__med-header">
+              <span class="rx-card__med-name">{{ med.name }}</span>
+              <span class="rx-card__med-spec">{{ med.specification }}</span>
+            </div>
+            <div class="rx-card__med-usage">
+              {{ med.dosage }} · {{ med.frequency }} · {{ med.duration }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="rx-card__divider" />
+
+      <!-- Notes -->
+      <div v-if="notes" class="rx-card__field">
+        <div class="rx-card__label rx-card__label--mb">
+          备注
+        </div>
+        <div class="rx-card__notes-text">
+          {{ notes }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="rx-card__footer">
+      <span class="rx-card__disclaimer">仅供医疗使用</span>
+      <button class="rx-card__detail-btn" @click="handleViewDetails">
+        查看详情
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rx-card {
+  width: 320px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(10, 191, 119, 0.15);
+  background: #fff;
+}
+
+.rx-card__header {
+  padding: 10px 14px;
+  background: rgba(10, 191, 119, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0ABF77;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.rx-card__header-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rx-card__date {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.rx-card__body {
+  padding: 12px 14px;
+  background: #FAFFFE;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rx-card__patient-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rx-card__patient-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rx-card__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #0ABF77;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.rx-card__patient-name-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rx-card__name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.rx-card__tag {
+  padding: 1px 6px;
+  background: #f3f4f6;
+  color: #374151;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.rx-card__rx-no {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.rx-card__divider {
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.rx-card__doctor-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+}
+
+.rx-card__doctor-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.rx-card__label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.rx-card__label--mb {
+  margin-bottom: 6px;
+}
+
+.rx-card__value {
+  color: #111827;
+}
+
+.rx-card__dept {
+  padding: 1px 6px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.rx-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rx-card__diagnosis {
+  font-size: 13px;
+  color: #0ABF77;
+  font-weight: 500;
+}
+
+.rx-card__med-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rx-card__med-item {
+  background: #fff;
+  border-radius: 8px;
+  padding: 10px;
+  border: 1px solid #f3f4f6;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rx-card__med-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.rx-card__med-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.rx-card__med-spec {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.rx-card__med-usage {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.rx-card__notes-text {
+  font-size: 13px;
+  color: #111827;
+}
+
+.rx-card__footer {
+  padding: 6px 14px;
+  background: #fff;
+  border-top: 1px solid #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rx-card__disclaimer {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.rx-card__detail-btn {
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 2px 0;
+}
+
+.rx-card__detail-btn:hover {
+  color: #0ABF77;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/constants.ts b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/constants.ts
new file mode 100644
index 0000000..768c3ab
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/constants.ts
@@ -0,0 +1,6 @@
+// Custom message businessID constants
+export const MEDICAL_BUSINESS_ID = {
+  MEDICAL_RECORD: 'medical_record',
+  PRESCRIPTION: 'prescription',
+  RATING: 'consultation_rating',
+} as const;
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalAudioCallPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalAudioCallPicker.vue
new file mode 100644
index 0000000..d1d473d
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalAudioCallPicker.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AudioCallPicker } from '@tencentcloud/chat-uikit-vue3';
+import { Phone } from 'lucide-vue-next';
+</script>
+
+<template>
+  <AudioCallPicker>
+    <!-- Report medical picker click event (remove for GitHub demo) -->
+    <span class="medical-picker-icon"><Phone :size="18" /></span>
+  </AudioCallPicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #0ABF77;
+}
+.medical-picker-icon:hover {
+  background-color: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalEmojiPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalEmojiPicker.vue
new file mode 100644
index 0000000..0dd6ae0
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalEmojiPicker.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Smile } from 'lucide-vue-next';
+import { EmojiPicker } from '@tencentcloud/chat-uikit-vue3';
+</script>
+
+<template>
+  <EmojiPicker>
+    <!-- Report medical picker click event (remove for GitHub demo) -->
+    <span class="medical-picker-icon"><Smile :size="18" /></span>
+  </EmojiPicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #0ABF77;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalFilePicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalFilePicker.vue
new file mode 100644
index 0000000..f9c3f96
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalFilePicker.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { FilePicker } from '@tencentcloud/chat-uikit-vue3';
+import { File } from 'lucide-vue-next';
+</script>
+
+<template>
+  <FilePicker>
+    <span class="medical-picker-icon"><File :size="18" /></span>
+  </FilePicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #0ABF77;
+}
+.medical-picker-icon:hover {
+  background-color: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalImagePicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalImagePicker.vue
new file mode 100644
index 0000000..129105d
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalImagePicker.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ImagePlus } from 'lucide-vue-next';
+import { ImagePicker } from '@tencentcloud/chat-uikit-vue3';
+</script>
+
+<template>
+  <ImagePicker>
+    <span class="medical-picker-icon"><ImagePlus :size="18" /></span>
+  </ImagePicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #0ABF77;
+}
+.medical-picker-icon:hover {
+  background-color: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPanel.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPanel.vue
new file mode 100644
index 0000000..fb93341
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPanel.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FileText, Send } from 'lucide-vue-next';
+
+export interface VisitRecord {
+  id: string;
+  date: string;
+  department: string;
+  chiefComplaint: string;
+  diagnosis: string;
+  status: 'completed' | 'in-progress';
+  patientName: string;
+  gender: string;
+  age: number;
+}
+
+const emit = defineEmits<{
+  close: [];
+  sendRecord: [record: VisitRecord];
+}>();
+
+const mockRecords: VisitRecord[] = [
+  {
+    id: '1',
+    date: '2026-03-28',
+    department: '内科',
+    chiefComplaint: '头痛、发热两天',
+    diagnosis: '上呼吸道感染',
+    status: 'completed',
+    patientName: '张三',
+    gender: '男',
+    age: 35,
+  },
+  {
+    id: '2',
+    date: '2026-03-15',
+    department: '心内科',
+    chiefComplaint: '胸闷气短一周，活动后加重',
+    diagnosis: '高血压病 2级',
+    status: 'completed',
+    patientName: '李四',
+    gender: '女',
+    age: 58,
+  },
+  {
+    id: '3',
+    date: '2026-03-10',
+    department: '骨科',
+    chiefComplaint: '左膝关节疼痛三天，伴活动受限',
+    diagnosis: '膝关节损伤',
+    status: 'in-progress',
+    patientName: '王五',
+    gender: '男',
+    age: 42,
+  },
+];
+
+const selectedId = ref<string | null>(null);
+const hoveredId = ref<string | null>(null);
+
+const handleSendRecord = (record: VisitRecord) => {
+  selectedId.value = record.id;
+  emit('sendRecord', record);
+};
+</script>
+
+<template>
+  <div class="record-panel">
+    <!-- Header -->
+    <div class="record-panel__header">
+      <div class="record-panel__title">
+        <FileText :size="16" class="record-panel__title-icon" />
+        <span>就诊记录</span>
+      </div>
+      <button class="record-panel__close" @click="emit('close')">
+        ✕
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="record-panel__body">
+      <div
+        v-for="record in mockRecords"
+        :key="record.id"
+        class="record-item"
+        :class="{
+          'record-item--hovered': hoveredId === record.id,
+          'record-item--selected': selectedId === record.id,
+        }"
+        @mouseenter="hoveredId = record.id"
+        @mouseleave="hoveredId = null"
+        @click="handleSendRecord(record)"
+      >
+        <div class="record-item__inner">
+          <!-- Status Dot -->
+          <div class="record-item__dot-wrapper">
+            <div
+              class="record-item__dot"
+              :class="record.status === 'completed' ? 'record-item__dot--completed' : 'record-item__dot--progress'"
+            />
+          </div>
+
+          <!-- Content -->
+          <div class="record-item__content">
+            <div class="record-item__meta">
+              <span class="record-item__date">{{ record.date }}</span>
+              <span class="record-item__dept">{{ record.department }}</span>
+            </div>
+            <div class="record-item__complaint">
+              {{ record.chiefComplaint }}
+            </div>
+            <div class="record-item__diagnosis">
+              {{ record.diagnosis }}
+            </div>
+          </div>
+
+          <!-- Send Button -->
+          <button
+            class="record-item__send"
+            :class="{ 'record-item__send--active': hoveredId === record.id }"
+            @click.stop="handleSendRecord(record)"
+          >
+            <span>发送</span>
+            <Send :size="12" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.record-panel {
+  width: 360px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.record-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 6px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.record-panel__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.record-panel__title-icon {
+  color: #0ABF77;
+}
+
+.record-panel__close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.record-panel__close:hover {
+  background: #f3f4f6;
+}
+
+.record-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.record-item {
+  position: relative;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.record-item--hovered {
+  background: #f9fafb;
+}
+
+.record-item--selected {
+  border-left: 4px solid #0ABF77;
+  padding-left: 7px;
+}
+
+.record-item__inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.record-item__dot-wrapper {
+  flex-shrink: 0;
+  padding-top: 4px;
+}
+
+.record-item__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.record-item__dot--completed {
+  background: #0ABF77;
+}
+
+.record-item__dot--progress {
+  background: #FBBF24;
+}
+
+.record-item__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.record-item__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.record-item__date {
+  font-size: 13px;
+  color: #111827;
+}
+
+.record-item__dept {
+  padding: 1px 6px;
+  background: #f3f4f6;
+  color: #374151;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.record-item__complaint {
+  font-size: 12px;
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-item__diagnosis {
+  font-size: 12px;
+  color: #0ABF77;
+}
+
+.record-item__send {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.record-item__send--active {
+  background: #0ABF77;
+  color: #fff;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPicker.vue
new file mode 100644
index 0000000..c1c3d9c
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalRecordPicker.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessageInputState } from '@tencentcloud/chat-uikit-vue3';
+import { ClipboardList } from 'lucide-vue-next';
+import { Popup as TPopup } from 'tdesign-vue-next';
+import { MEDICAL_BUSINESS_ID } from '../constants';
+import MedicalRecordPanel from './MedicalRecordPanel.vue';
+import type { VisitRecord } from './MedicalRecordPanel.vue';
+
+const isOpen = ref(false);
+const { sendCustomMessage } = useMessageInputState();
+
+const handleSendRecord = async (record: VisitRecord) => {
+  await sendCustomMessage({
+    payload: {
+      data: JSON.stringify({
+        businessID: MEDICAL_BUSINESS_ID.MEDICAL_RECORD,
+        ...record,
+      }),
+      description: `就诊记录 - ${record.patientName} ${record.date}`,
+      extension: '',
+    },
+  });
+  isOpen.value = false;
+};
+
+const handleClose = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <TPopup
+    v-model:visible="isOpen"
+    trigger="click"
+    placement="top-left"
+    :show-arrow="false"
+    :destroy-on-close="true"
+  >
+    <button
+      class="record-picker__trigger"
+      title="发送病历"
+    >
+      <ClipboardList :size="18" />
+    </button>
+    <template #content>
+      <MedicalRecordPanel
+        @close="handleClose"
+        @send-record="handleSendRecord"
+      />
+    </template>
+  </TPopup>
+</template>
+
+<style scoped>
+.record-picker__trigger {
+  padding: 4px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  color: #0ABF77;
+}
+.record-picker__trigger:hover {
+  background: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoCallPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoCallPicker.vue
new file mode 100644
index 0000000..ab0e5e3
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoCallPicker.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { VideoCallPicker } from '@tencentcloud/chat-uikit-vue3';
+import { Video } from 'lucide-vue-next';
+</script>
+
+<template>
+  <VideoCallPicker>
+    <span class="medical-picker-icon"><Video :size="18" /></span>
+  </VideoCallPicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #0ABF77;
+}
+.medical-picker-icon:hover {
+  background-color: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoPicker.vue
new file mode 100644
index 0000000..7563208
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/MedicalVideoPicker.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { VideoPicker } from '@tencentcloud/chat-uikit-vue3';
+import { SquarePlay } from 'lucide-vue-next';
+</script>
+
+<template>
+  <VideoPicker>
+    <span class="medical-picker-icon"><SquarePlay :size="18" /></span>
+  </VideoPicker>
+</template>
+
+<style scoped>
+.medical-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #0ABF77;
+}
+.medical-picker-icon:hover {
+  background-color: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPanel.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPanel.vue
new file mode 100644
index 0000000..9edc289
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPanel.vue
@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { X, Plus, Trash2, Pill } from 'lucide-vue-next';
+
+export interface Medication {
+  name: string;
+  specification: string;
+  dosage: string;
+  frequency: string;
+  duration: string;
+}
+
+export interface PrescriptionRecord {
+  id: string;
+  prescriptionNo: string;
+  date: string;
+  patientName: string;
+  gender: string;
+  age: number;
+  doctorName: string;
+  department: string;
+  diagnosis: string;
+  medications: Medication[];
+  status: 'confirmed' | 'pending';
+  notes?: string;
+}
+
+interface MedicationInput {
+  id: string;
+  name: string;
+  usage: string;
+}
+
+const props = withDefaults(defineProps<{
+  patientInfo?: { name: string; gender: string; age: number };
+}>(), {
+  patientInfo: () => ({ name: '张三', gender: '男', age: 35 }),
+});
+
+const emit = defineEmits<{
+  close: [];
+  sendPrescription: [prescription: PrescriptionRecord];
+}>();
+
+const medications = ref<MedicationInput[]>([
+  { id: '1', name: '', usage: '' },
+]);
+const notes = ref('');
+
+const handleAddMedication = () => {
+  medications.value.push({ id: String(Date.now()), name: '', usage: '' });
+};
+
+const handleRemoveMedication = (id: string) => {
+  if (medications.value.length > 1) {
+    medications.value = medications.value.filter(m => m.id !== id);
+  }
+};
+
+const handleSend = () => {
+  const validMeds = medications.value.filter(m => m.name.trim() !== '');
+  if (validMeds.length === 0) {
+    alert('请至少添加一个药品');
+    return;
+  }
+
+  const now = new Date();
+  const dateStr = now.toISOString().split('T')[0];
+  const rxNo = `Rx-${dateStr.replace(/-/g, '')}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
+
+  const parsedMeds: Medication[] = validMeds.map((m) => {
+    const parts = m.usage.split(/\s+/);
+    return {
+      name: m.name,
+      specification: parts[0] || '',
+      dosage: parts[0] || '',
+      frequency: parts[1] || '',
+      duration: parts[2] || '',
+    };
+  });
+
+  const prescription: PrescriptionRecord = {
+    id: String(Date.now()),
+    prescriptionNo: rxNo,
+    date: dateStr,
+    patientName: props.patientInfo.name,
+    gender: props.patientInfo.gender,
+    age: props.patientInfo.age,
+    doctorName: '张医生',
+    department: '内科',
+    diagnosis: '待填写',
+    medications: parsedMeds,
+    status: 'pending',
+    notes: notes.value.trim() || undefined,
+  };
+
+  emit('sendPrescription', prescription);
+  emit('close');
+};
+</script>
+
+<template>
+  <div class="rx-panel">
+    <!-- Header -->
+    <div class="rx-panel__header">
+      <h2 class="rx-panel__title">
+        <Pill :size="16" class="rx-panel__title-icon" />
+        <span>开具处方</span>
+      </h2>
+      <button class="rx-panel__close" @click="emit('close')">
+        <X :size="16" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="rx-panel__body">
+      <!-- Patient Info -->
+      <div class="rx-panel__section">
+        <label class="rx-panel__label">患者信息</label>
+        <div class="rx-panel__patient">
+          <span>{{ patientInfo.name }}</span>
+          <span class="rx-panel__patient-sep">|</span>
+          <span>{{ patientInfo.gender }}</span>
+          <span class="rx-panel__patient-sep">|</span>
+          <span>{{ patientInfo.age }}岁</span>
+        </div>
+      </div>
+
+      <!-- Medications -->
+      <div class="rx-panel__section">
+        <label class="rx-panel__label">药品清单</label>
+        <div class="rx-panel__med-list">
+          <div
+            v-for="med in medications"
+            :key="med.id"
+            class="rx-panel__med-item"
+          >
+            <div class="rx-panel__med-row">
+              <input
+                v-model="med.name"
+                type="text"
+                class="rx-panel__input rx-panel__input--flex"
+                placeholder="药品名称"
+              >
+              <button
+                v-if="medications.length > 1"
+                class="rx-panel__del-btn"
+                title="删除"
+                @click="handleRemoveMedication(med.id)"
+              >
+                <Trash2 :size="16" />
+              </button>
+            </div>
+            <input
+              v-model="med.usage"
+              type="text"
+              class="rx-panel__input"
+              placeholder="剂量用法（如：0.5g 每日3次 5天）"
+            >
+          </div>
+        </div>
+
+        <button class="rx-panel__add-btn" @click="handleAddMedication">
+          <Plus :size="14" />
+          <span>添加药品</span>
+        </button>
+      </div>
+
+      <!-- Notes -->
+      <div class="rx-panel__section">
+        <label class="rx-panel__label">注意事项</label>
+        <textarea
+          v-model="notes"
+          class="rx-panel__textarea"
+          placeholder="请填写用药注意事项（选填）"
+          rows="3"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="rx-panel__footer">
+      <button class="rx-panel__btn rx-panel__btn--cancel" @click="emit('close')">
+        取消
+      </button>
+      <button class="rx-panel__btn rx-panel__btn--send" @click="handleSend">
+        发送
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rx-panel {
+  width: 400px;
+  max-height: 520px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.rx-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.rx-panel__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+}
+
+.rx-panel__title-icon {
+  color: #0ABF77;
+}
+
+.rx-panel__close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.rx-panel__close:hover {
+  background: #f3f4f6;
+}
+
+.rx-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rx-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rx-panel__label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.rx-panel__patient {
+  background: #f9fafb;
+  border-radius: 8px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: #374151;
+}
+
+.rx-panel__patient-sep {
+  color: #d1d5db;
+}
+
+.rx-panel__med-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rx-panel__med-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rx-panel__med-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rx-panel__input {
+  width: 100%;
+  padding: 6px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  color: #111827;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.rx-panel__input--flex {
+  flex: 1;
+}
+
+.rx-panel__input:focus {
+  border-color: #0ABF77;
+}
+
+.rx-panel__input::placeholder {
+  color: #9ca3af;
+}
+
+.rx-panel__del-btn {
+  padding: 6px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: #ef4444;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.rx-panel__del-btn:hover {
+  background: #fef2f2;
+}
+
+.rx-panel__add-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 12px;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.rx-panel__add-btn:hover {
+  border-color: #0ABF77;
+  color: #0ABF77;
+}
+
+.rx-panel__textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  color: #111827;
+  resize: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.rx-panel__textarea:focus {
+  border-color: #0ABF77;
+}
+
+.rx-panel__textarea::placeholder {
+  color: #9ca3af;
+}
+
+.rx-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.rx-panel__btn {
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+}
+
+.rx-panel__btn--cancel {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  color: #374151;
+}
+
+.rx-panel__btn--cancel:hover {
+  background: #f9fafb;
+}
+
+.rx-panel__btn--send {
+  background: #0ABF77;
+  color: #fff;
+}
+
+.rx-panel__btn--send:hover {
+  background: #09a868;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPicker.vue
new file mode 100644
index 0000000..fdb20a9
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/PrescriptionPicker.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessageInputState } from '@tencentcloud/chat-uikit-vue3';
+import { Pill } from 'lucide-vue-next';
+import { Popup as TPopup } from 'tdesign-vue-next';
+import { MEDICAL_BUSINESS_ID } from '../constants';
+import PrescriptionPanel from './PrescriptionPanel.vue';
+import type { PrescriptionRecord } from './PrescriptionPanel.vue';
+
+const isOpen = ref(false);
+const { sendCustomMessage } = useMessageInputState();
+
+const handleSendPrescription = async (prescription: PrescriptionRecord) => {
+  await sendCustomMessage({
+    payload: {
+      data: JSON.stringify({
+        businessID: MEDICAL_BUSINESS_ID.PRESCRIPTION,
+        ...prescription,
+      }),
+      description: `电子处方 - ${prescription.patientName} ${prescription.prescriptionNo}`,
+      extension: '',
+    },
+  });
+  isOpen.value = false;
+};
+
+const handleClose = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <TPopup
+    v-model:visible="isOpen"
+    trigger="click"
+    placement="top-left"
+    :show-arrow="false"
+    :destroy-on-close="false"
+  >
+    <button
+      class="rx-picker__trigger"
+      title="开具处方"
+    >
+      <Pill :size="18" />
+    </button>
+    <template #content>
+      <PrescriptionPanel
+        @close="handleClose"
+        @send-prescription="handleSendPrescription"
+      />
+    </template>
+  </TPopup>
+</template>
+
+<style scoped>
+.rx-picker__trigger {
+  padding: 4px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  color: #0ABF77;
+}
+.rx-picker__trigger:hover {
+  background: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickRatePicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickRatePicker.vue
new file mode 100644
index 0000000..6824f48
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickRatePicker.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessageInputState } from '@tencentcloud/chat-uikit-vue3';
+import { Star } from 'lucide-vue-next';
+import { Popup as TPopup, Rate as TRate, Button as TButton } from 'tdesign-vue-next';
+import { MEDICAL_BUSINESS_ID } from '../constants';
+
+const isOpen = ref(false);
+const rate = ref(0);
+const { sendCustomMessage } = useMessageInputState();
+
+const handleSubmit = () => {
+  isOpen.value = false;
+  sendCustomMessage({
+    payload: {
+      data: JSON.stringify({
+        businessID: MEDICAL_BUSINESS_ID.RATING,
+        rate: rate.value,
+      }),
+      description: `咨询评价 - ${rate.value}星`,
+      extension: '',
+    },
+  });
+};
+
+const handleRateChange = (value: number) => {
+  rate.value = value;
+};
+</script>
+
+<template>
+  <TPopup
+    v-model:visible="isOpen"
+    trigger="click"
+    placement="top"
+    :show-arrow="false"
+    :destroy-on-close="true"
+  >
+    <button class="quick-rate-picker__trigger" title="快捷评价">
+      <Star :size="18" />
+    </button>
+    <template #content>
+      <div class="quick-rate-picker__panel">
+        <div class="quick-rate-picker__header">
+          <span class="quick-rate-picker__header-title">请为本次咨询打分</span>
+        </div>
+        <TRate class="quick-rate-picker__content" @change="handleRateChange" />
+        <div class="quick-rate-picker__footer">
+          <TButton theme="success" @click="handleSubmit">
+            提交
+          </TButton>
+        </div>
+      </div>
+    </template>
+  </TPopup>
+</template>
+
+<style scoped>
+.quick-rate-picker__trigger {
+  padding: 4px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  color: #0ABF77;
+}
+.quick-rate-picker__trigger:hover {
+  background: var(--button-color-secondary-hover);
+}
+.quick-rate-picker__panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+.quick-rate-picker__header {
+  border-bottom: 1px solid #e5e7eb;
+  text-align: center;
+  padding: 10px 0;
+  flex-shrink: 0;
+}
+.quick-rate-picker__header-title {
+  font-size: 14px;
+}
+.quick-rate-picker__content {
+  padding: 10px 0 5px;
+  margin: auto;
+}
+.quick-rate-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPanel.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPanel.vue
new file mode 100644
index 0000000..cbfe9da
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPanel.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessageInputState } from '@tencentcloud/chat-uikit-vue3';
+import { Zap, Send } from 'lucide-vue-next';
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { sendMessage, setContent } = useMessageInputState();
+
+const quickReplies = [
+  { id: 'greeting', text: '您好，请问有什么可以帮您的？' },
+  { id: 'wait', text: '请稍等，我正在查看您的病历资料。' },
+  { id: 'confirm', text: '好的，我已了解您的情况。' },
+  { id: 'advice', text: '根据您的症状，建议您进行以下检查：' },
+  { id: 'followup', text: '请按时复诊，如有不适及时联系。' },
+  { id: 'prescription', text: '我已为您开具处方，请查看。' },
+];
+
+const hoveredId = ref<string | null>(null);
+
+const handleSelect = (text: string) => {
+  setContent(text);
+  emit('close');
+};
+
+const handleSend = (text: string) => {
+  sendMessage(text);
+  emit('close');
+};
+</script>
+
+<template>
+  <div class="qr-panel">
+    <!-- Header -->
+    <div class="qr-panel__header">
+      <div class="qr-panel__title">
+        <Zap :size="16" class="qr-panel__title-icon" />
+        <span>快捷回复</span>
+      </div>
+      <button class="qr-panel__close" @click="emit('close')">
+        ✕
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="qr-panel__body">
+      <div
+        v-for="reply in quickReplies"
+        :key="reply.id"
+        class="qr-item"
+        :class="{ 'qr-item--hovered': hoveredId === reply.id }"
+        @mouseenter="hoveredId = reply.id"
+        @mouseleave="hoveredId = null"
+        @click="handleSelect(reply.text)"
+      >
+        <div class="qr-item__text">
+          {{ reply.text }}
+        </div>
+        <button
+          class="qr-item__send"
+          @click.stop="handleSend(reply.text)"
+        >
+          <span>发送</span>
+          <Send :size="12" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qr-panel {
+  width: 360px;
+  max-height: 400px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.qr-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 6px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.qr-panel__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.qr-panel__title-icon {
+  color: #0ABF77;
+}
+
+.qr-panel__close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.qr-panel__close:hover {
+  background: #f3f4f6;
+}
+
+.qr-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.qr-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: #fff;
+}
+
+.qr-item--hovered {
+  background: #f9fafb;
+}
+
+.qr-item__text {
+  flex: 1;
+  font-size: 13px;
+  color: #374151;
+  line-height: 1.4;
+}
+
+.qr-item__send {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: #f3f4f6;
+  color: #6b7280;
+
+  &:hover {
+    background: #0ABF77;
+    color: #fff;
+  }
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPicker.vue b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPicker.vue
new file mode 100644
index 0000000..c200cdb
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/Medical/pickers/QuickReplyPicker.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Zap } from 'lucide-vue-next';
+import { Popup as TPopup } from 'tdesign-vue-next';
+import QuickReplyPanel from './QuickReplyPanel.vue';
+
+const isOpen = ref(false);
+
+const handleClose = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <TPopup
+    v-model:visible="isOpen"
+    trigger="click"
+    placement="top-left"
+    :show-arrow="false"
+    :destroy-on-close="true"
+  >
+    <button class="quick-reply-picker__trigger" title="快捷回复">
+      <Zap :size="18" />
+    </button>
+    <template #content>
+      <QuickReplyPanel @close="handleClose" />
+    </template>
+  </TPopup>
+</template>
+
+<style scoped>
+.quick-reply-picker__trigger {
+  padding: 4px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  color: #0ABF77;
+}
+.quick-reply-picker__trigger:hover {
+  background: var(--button-color-secondary-hover);
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/SideTab.vue b/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/SideTab.vue
new file mode 100644
index 0000000..e29b40d
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/SideTab.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="side-tab" :class="{ dark: isDark }">
+    <div class="avatar-wrapper">
+      <Avatar class="avatar" :src="loginUserInfo?.avatarUrl" />
+      <div class="tooltip">
+        <div class="tooltip-name">{{ loginUserInfo?.userName }}</div>
+        <div class="tooltip-id">ID: {{ loginUserInfo?.userId }}</div>
+      </div>
+    </div>
+    <div class="tabs">
+      <div
+        class="tab-item"
+        @click="handleTabChange('conversation')"
+      >
+        <IconMessage size="24"  v-if="props.activeTab !== 'conversation'" />
+        <IconMessageSelected size="24" v-else />
+      </div>
+      <div
+        class="tab-item"
+        @click="handleTabChange('contact')"
+      >
+        <IconContacts size="24" v-if="props.activeTab !== 'contact'" />
+        <IconContactsSelected size="24" v-else />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useLoginState, useUIKit, Avatar } from '@tencentcloud/chat-uikit-vue3';
+import { 
+  IconMessage,
+  IconMessageSelected,
+  IconContacts,
+  IconContactsSelected,
+} from '@tencentcloud/uikit-base-component-vue3';
+
+const { theme } = useUIKit();
+const { loginUserInfo } = useLoginState();
+
+const isDark = computed(() => theme.value === 'dark' || theme.value === 'serious');
+
+interface Props {
+  activeTab?: 'conversation' | 'contact';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeTab: 'conversation'
+});
+
+const emit = defineEmits<{
+  change: [tab: 'conversation' | 'contact'];
+}>();
+
+const handleTabChange = (tab: 'conversation' | 'contact') => {
+  emit('change', tab);
+};
+</script>
+
+<style scoped>
+.side-tab {
+  width: 60px;
+  background: var(--bg-color-function);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+  transition: background 0.3s;
+}
+
+.avatar-wrapper {
+  position: relative;
+  margin-bottom: 24px;
+  cursor: pointer;
+}
+
+.avatar-wrapper:hover:deep(.avatar) {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.tooltip {
+  position: absolute;
+  left: 60px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  border-radius: 6px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: all 0.3s;
+  z-index: 1000;
+}
+
+.tooltip::before {
+  content: '';
+  position: absolute;
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.85);
+}
+
+.avatar-wrapper:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tooltip-name {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.tooltip-id {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: transparent;
+}
+
+.tab-item {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: var(--text-color-primary);
+}
+
+.side-tab.dark {
+  background: #1a1a1a;
+}
+
+.side-tab.dark .avatar-wrapper:hover:deep(.avatar) {
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}
+
+.side-tab.dark .tooltip {
+  background: rgba(255, 255, 255, 0.95);
+  color: #1a1a1a;
+}
+
+.side-tab.dark .tooltip::before {
+  border-right-color: rgba(255, 255, 255, 0.95);
+}
+
+.side-tab.dark .tab-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.side-tab.dark .tab-item.active {
+  background: #1890ff;
+  color: #fff;
+}
+</style>
diff --git a/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/index.ts b/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/index.ts
new file mode 100644
index 0000000..d55434c
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/components/SideTab/index.ts
@@ -0,0 +1 @@
+export { default as SideTab } from './SideTab.vue';
diff --git a/demos/industry-showcase/chat-medical-vue3/src/locales.ts b/demos/industry-showcase/chat-medical-vue3/src/locales.ts
new file mode 100644
index 0000000..15a24c6
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/locales.ts
@@ -0,0 +1,47 @@
+// Custom language resources for the medical chat showroom
+export const medicalLanguageResources = [
+  {
+    lng: 'zh-CN',
+    translation: {
+      'medical.login.title': '医疗问诊',
+      'medical.login.subtitle': '输入您的凭证以开始',
+      'medical.login.sdkAppId': 'SDKAppID',
+      'medical.login.sdkAppIdPlaceholder': '例如 1400000000',
+      'medical.login.userId': '用户 ID',
+      'medical.login.userIdPlaceholder': '例如 user0',
+      'medical.login.userSig': 'UserSig',
+      'medical.login.userSigPlaceholder': '在此粘贴您的 UserSig',
+      'medical.login.submit': '登录',
+      'medical.login.loading': '登录中...',
+      'medical.login.error.emptyFields': '请填写所有字段',
+      'medical.login.error.failed': '登录失败',
+      'medical.login.hint': '从 <1>IM 控制台</1> 获取凭证',
+      'medical.filter.all': '全部',
+      'medical.filter.pending': '待问诊',
+      'medical.filter.active': '问诊中',
+      'medical.filter.done': '已结束',
+    },
+  },
+  {
+    lng: 'en-US',
+    translation: {
+      'medical.login.title': 'Medical Chat',
+      'medical.login.subtitle': 'Enter your credentials to start',
+      'medical.login.sdkAppId': 'SDKAppID',
+      'medical.login.sdkAppIdPlaceholder': 'e.g. 1400000000',
+      'medical.login.userId': 'UserID',
+      'medical.login.userIdPlaceholder': 'e.g. user0',
+      'medical.login.userSig': 'UserSig',
+      'medical.login.userSigPlaceholder': 'Paste your UserSig here',
+      'medical.login.submit': 'Login',
+      'medical.login.loading': 'Logging in...',
+      'medical.login.error.emptyFields': 'Please fill in all fields',
+      'medical.login.error.failed': 'Login failed',
+      'medical.login.hint': 'Get credentials from <1>IM Console</1>',
+      'medical.filter.all': 'All',
+      'medical.filter.pending': 'Pending',
+      'medical.filter.active': 'In Progress',
+      'medical.filter.done': 'Completed',
+    },
+  },
+];
diff --git a/demos/industry-showcase/chat-medical-vue3/src/main.ts b/demos/industry-showcase/chat-medical-vue3/src/main.ts
new file mode 100644
index 0000000..2425c0f
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/demos/industry-showcase/chat-medical-vue3/src/style.css b/demos/industry-showcase/chat-medical-vue3/src/style.css
new file mode 100644
index 0000000..b2c7f5c
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/style.css
@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/src/vite-env.d.ts b/demos/industry-showcase/chat-medical-vue3/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demos/industry-showcase/chat-medical-vue3/tsconfig.app.json b/demos/industry-showcase/chat-medical-vue3/tsconfig.app.json
new file mode 100644
index 0000000..b8e9723
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/tsconfig.json b/demos/industry-showcase/chat-medical-vue3/tsconfig.json
new file mode 100644
index 0000000..ea9d0cd
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/tsconfig.node.json b/demos/industry-showcase/chat-medical-vue3/tsconfig.node.json
new file mode 100644
index 0000000..3afdd6e
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/vite.config.ts b/demos/industry-showcase/chat-medical-vue3/vite.config.ts
new file mode 100644
index 0000000..027af1e
--- /dev/null
+++ b/demos/industry-showcase/chat-medical-vue3/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+})