feat: 添加Ai聊天组件示例

src/views/chatai/components/Bard.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background-color: #f3f6fc;
+      border-color: #dcdcdc;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: '1px solid #969696',
+          boxShadow: 'unset',
+          width: '78%',
+          marginLeft: '-15px'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: { bubble: { marginLeft: '0px', color: 'black' } },
+        ai: {
+          innerContainer: { borderRadius: '15px', backgroundColor: 'white' }
+        }
+      }
+    }"
+    :avatars="{
+      default: {
+        styles: {
+          position: 'left',
+          container: { marginLeft: '12px', marginRight: '5px' }
+        }
+      },
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/gemini.png',
+        styles: { position: 'left', avatar: { paddingTop: '6px' } }
+      }
+    }"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: {
+        default: {
+          container: {
+            default: {
+              bottom: '1em',
+              right: '0.6em',
+              borderRadius: '20px',
+              width: '1.9em',
+              height: '1.9em'
+            }
+          },
+          svg: { styles: { default: { bottom: '0.35em', left: '0.35em' } } }
+        },
+        position: 'inside-right'
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.9em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: '#f3f6fc'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '韩信是谁？', role: 'user' },
+      {
+        text: '韩信（约前231年－前196年），是秦末汉初时期的杰出军事家和战略家，被后世誉为“兵仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Bing.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background: linear-gradient(
+        90deg,
+        rgb(239 242 247) 0%,
+        7.6029%,
+        rgb(237 240 249) 15.2057%,
+        20.7513%,
+        rgb(235 239 248) 26.297%,
+        27.6386%,
+        rgb(235 239 248) 28.9803%,
+        38.2826%,
+        rgb(231 237 249) 47.585%,
+        48.1216%,
+        rgb(230 236 250) 48.6583%,
+        53.1306%,
+        rgb(228 236 249) 57.6029%,
+        61.5385%,
+        rgb(227 234 250) 65.4741%,
+        68.7835%,
+        rgb(222 234 250) 72.093%,
+        75.7603%,
+        rgb(219 230 248) 79.4275%,
+        82.8265%,
+        rgb(216 229 248) 86.2254%,
+        87.8354%,
+        rgb(213 228 249) 89.4454%,
+        91.8605%,
+        rgb(210 226 249) 94.2755%,
+        95.4383%,
+        rgb(209 225 248) 96.6011%,
+        98.3005%,
+        rgb(208 224 247) 100%
+      );
+      border-color: #e4e4e4;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: 'unset',
+          width: '78%',
+          marginLeft: '-15px',
+          boxShadow:
+            '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#606060' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px',
+            boxShadow:
+              '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+          }
+        },
+        user: {
+          bubble: {
+            background: 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)'
+          }
+        },
+        ai: { bubble: { background: 'rgba(255,255,255,0.7)' } }
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.8em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: 'unset'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed94' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '赵云是谁？', role: 'user' },
+      {
+        text: '赵云（约168年－229年），字子龙，是三国时期蜀汉的重要将领，以其忠诚和勇敢著称。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Blue.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/blue.jpg&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: { backgroundColor: '#2670ff' }
+        },
+        ai: { bubble: { backgroundColor: '#004f97', color: 'white' } }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#004f97',
+          color: 'white',
+          boxShadow: 'unset'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#d1d1d1' } }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: #0174db;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '熬夜都有哪些坏处？', role: 'user' },
+      {
+        text: '熬夜会损害身体健康，导致免疫力下降、精神不振和工作效率降低。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/ChatGPT.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: {
+          bubble: {
+            marginLeft: '0px',
+            color: 'black'
+          }
+        },
+        ai: {
+          outerContainer: {
+            backgroundColor: 'rgba(247,247,248)',
+            borderTop: '1px solid rgba(0,0,0,.1)',
+            borderBottom: '1px solid rgba(0,0,0,.1)'
+          }
+        }
+      }
+    }"
+    :avatars="{
+      default: { styles: { position: 'left' } },
+      ai: { src: 'https://xiaoxian521.github.io/hyperlink/svg/openai.svg' }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            padding: '1px 0 0 5px',
+            backgroundColor: '#19c37d'
+          },
+          hover: { backgroundColor: '#0bab69' },
+          click: { backgroundColor: '#068e56' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; ?> <svg viewBox=&quot;0 0 28 28&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <g> <path d=&quot;M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z&quot;> </path> </g> </svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        container: { default: { backgroundColor: 'white' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: {
+          default: { backgroundColor: 'white' },
+          hover: { backgroundColor: '#dadada52' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <rect width=&quot;24&quot; height=&quot;24&quot; rx=&quot;4&quot; ry=&quot;4&quot; /> </svg>',
+          styles: {
+            default: {
+              width: '0.95em',
+              marginTop: '0.32em',
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{ placeholder: { text: '发送消息' } }"
+    :history="[
+      { text: '李白是谁？', role: 'user' },
+      {
+        text: '李白（701年2月28日－762年），号青莲居士，又号“谪仙人”，是唐代著名的浪漫主义诗人，被后人誉为“诗仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Dark.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="background-color: #292929; border: unset; border-radius: 10px"
+    :messageStyles="{
+      default: {
+        ai: { bubble: { backgroundColor: '#545454', color: 'white' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { backgroundColor: '#545454', color: 'white' }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#666666',
+          border: 'unset',
+          color: '#e8e8e8'
+        }
+      },
+      placeholder: {
+        text: '发送消息',
+        style: { color: '#bcbcbc' }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: { bottom: '0.7rem' }
+        },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: grey;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '什么水果适合减脂期间吃？', role: 'user' },
+      {
+        text: '减脂期间适合吃苹果、柑橘类水果、蓝莓和草莓等低热量、高纤维的水果，有助于增加饱腹感并促进新陈代谢。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/FullInput.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :textInput="{
+      styles: {
+        container: {
+          width: '100%',
+          margin: '0',
+          border: 'unset',
+          borderTop: '1px solid #d5d5d5',
+          borderRadius: '0px',
+          boxShadow: 'unset'
+        },
+        text: {
+          fontSize: '1.05em',
+          paddingTop: '11px',
+          paddingBottom: '13px',
+          paddingLeft: '12px',
+          paddingRight: '2.4em'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            transform: 'scale(1.21)',
+            marginBottom: '-3px',
+            marginRight: '0.4em'
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '预防心梗、脑梗的方法？', role: 'user' },
+      {
+        text: '预防心梗和脑梗的关键方法包括保持健康的生活方式，如均衡饮食、定期锻炼、控制血压和血脂、戒烟限酒以及管理压力。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Group.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    auxiliaryStyle="
+    .deep-chat-top-message .message-bubble {
+        border-top-left-radius: 5px !important;
+        border-top-right-radius: 5px !important;
+    }
+    .deep-chat-middle-message .message-bubble {
+        margin-top: 0px;
+    }
+    .deep-chat-bottom-message .message-bubble {
+        margin-top: 0px;
+        border-bottom-left-radius: 5px !important;
+        border-bottom-right-radius: 5px !important;
+    }
+    .deep-chat-top-message.deep-chat-bottom-message .message-bubble {
+      margin-top: 10px;
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            borderRadius: '0px'
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :history="[
+      { text: '组1', role: 'group1' },
+      { text: '组2-1', role: 'group2' },
+      { text: '组2-2', role: 'group2' },
+      { text: '组2-3', role: 'group2' },
+      { text: '组3-1', role: 'group3' },
+      { text: '组3-2', role: 'group3' }
+    ]"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/IntroPanel.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    demo="true"
+    style="border-radius: 8px"
+  >
+    <div
+      style="
+        display: none;
+        width: 200px;
+        padding: 12px;
+        padding-bottom: 15px;
+        background-color: #f3f3f3;
+        border-radius: 10px;
+      "
+    >
+      <div>
+        <div style="margin-bottom: 8px; font-size: 16px; text-align: center">
+          <b>简介面板</b>
+        </div>
+        <div style="font-size: 15px; line-height: 20px">
+          插入描述以帮助您的用户了解如何使用该组件
+        </div>
+      </div>
+    </div>
+  </deep-chat>
+</template>

src/views/chatai/components/LoFi.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/lofi.png&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)',
+            color: 'white'
+          }
+        },
+        ai: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+            color: 'white'
+          }
+        }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: {
+              background:
+                'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+              color: 'white'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          backgroundColor: 'rgb(239 245 255)',
+          color: '#0d008d'
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #54a7ff;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '公认的最减肥运动推荐一个？', role: 'user' },
+      {
+        text: '公认的最减肥运动之一是高强度间歇训练（HIIT），它通过短时间内的高强度运动和短暂休息交替进行，不仅在运动过程中燃烧大量卡路里，还能通过“后燃效应”让身体在运动结束后继续消耗热量。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/MessageCode.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+import hljs from "highlight.js";
+// @ts-expect-error
+window.hljs = hljs;
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :history="[
+      {
+        text: '```java\nwhile (i < 5) {\n console.log(&quot;hi&quot;);\n i+= 1;\n}\n```',
+        role: 'ai'
+      }
+    ]"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: { maxWidth: '270px' }
+        }
+      }
+    }"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/Red.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :messageStyles="{
+      default: { user: { bubble: { backgroundColor: '#ff2020' } } }
+    }"
+    :avatars="{
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/robot.png'
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          border: '1px solid #ffd9d9',
+          backgroundColor: '#fffcfc'
+        }
+      },
+      placeholder: { text: '发送消息' }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: red;
+    }"
+    :history="[
+      { text: '健身的最佳时间？', role: 'user' },
+      {
+        text: '健身的最佳时间是根据个人作息和偏好而定，但一般建议在下午或傍晚进行锻炼以达到最佳状态。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Speech.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: { position: 'outside-left' }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :introMessage="{
+      text: '单击左下角麦克风开始转录您的讲话。'
+    }"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/iMessage.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      font-size: 16px;
+      font-family:
+        system-ui, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif,
+        &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
+        &quot;Segoe UI Symbol&quot;;
+    "
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '75%',
+            borderRadius: '1em',
+            padding: '.42em .7em',
+            fontSize: '15px'
+          }
+        },
+        user: { bubble: { backgroundColor: '#00c82a' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { padding: '0.6em 0.75em 0.6em 1.3em' }
+          }
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            width: '0.95em',
+            height: '0.95em',
+            justifyContent: 'center',
+            display: 'flex',
+            borderRadius: '25px',
+            padding: '0.3em',
+            backgroundColor: '#00c82a'
+          }
+        },
+        svg: {
+          content:
+            '<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 115.4 122.88&quot;><path d=&quot;M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)',
+              transform: 'scale(0.95)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          boxShadow: 'none',
+          borderRadius: '1em',
+          border: '1px solid rgba(0,0,0,0.2)'
+        },
+        text: {
+          padding: '0.4em 0.8em',
+          paddingRight: '2.5em'
+        }
+      }
+    }"
+    :images="true"
+    :dropupStyles="{
+      button: {
+        styles: {
+          container: {
+            default: {
+              width: '1.6em',
+              height: '1.6em',
+              borderRadius: '25px',
+              backgroundColor: '#8282821a'
+            }
+          },
+          svg: {
+            styles: {
+              default: {
+                width: '1em',
+                left: '5px',
+                top: '0.2em',
+                filter:
+                  'brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)'
+              }
+            },
+            content:
+              '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z&quot;/></svg>'
+          }
+        }
+      }
+    }"
+    :attachmentContainerStyle="{
+      backgroundColor: 'rgba(255, 255, 255, 0.6)',
+      borderRadius: '5px 5px 0 0',
+      border: '1px solid rgba(0,0,0,0.2)',
+      top: '-2.6em',
+      height: '4em'
+    }"
+    :history="[
+      { text: '钓鱼需要准备什么东西？', role: 'user' },
+      {
+        text: '钓鱼需要准备鱼竿、渔轮、钓线、鱼钩、浮漂、铅坠和适合的饵料。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/index.ts

@@ -0,0 +1,13 @@
+export { default as ChatGPT } from "./ChatGPT.vue";
+export { default as Bard } from "./Bard.vue";
+export { default as Bing } from "./Bing.vue";
+export { default as iMessage } from "./iMessage.vue";
+export { default as Blue } from "./Blue.vue";
+export { default as LoFi } from "./LoFi.vue";
+export { default as Red } from "./Red.vue";
+export { default as Dark } from "./Dark.vue";
+export { default as FullInput } from "./FullInput.vue";
+export { default as Group } from "./Group.vue";
+export { default as MessageCode } from "./MessageCode.vue";
+export { default as Speech } from "./Speech.vue";
+export { default as IntroPanel } from "./IntroPanel.vue";