diff --git a/src/views/Agent/Chat/components/ChatBox.vue b/src/views/Agent/Chat/components/ChatBox.vue
new file mode 100644
index 0000000..b2f5b32
--- /dev/null
+++ b/src/views/Agent/Chat/components/ChatBox.vue
@@ -0,0 +1,36 @@
+<template>
+  <a-layout-content style="padding: 24px; background: #fff; min-height: 280px;">
+    <div style="text-align: center; margin-bottom: 20px">
+      <img src="@/assets/chatbot-icon.png" alt="Chatbot Icon" style="width: 60px" />
+      <h3>舆情脉络整理</h3>
+    </div>
+    <a-card :bordered="false">
+      <p>
+        您好，我是舆情脉络整理助手，可以帮您梳理事件发展脉络，提取核心观点，分析情绪倾向，快速生成舆情摘要与应对建议。
+      </p>
+    </a-card>
+    <div style="margin-top: 20px">
+      <a-input-search
+        v-model:value="message"
+        placeholder="发送消息..."
+        enter-button
+        @search="onSearch"
+      >
+        <template #enterButton>
+          <a-button type="primary">
+<!--            <template #icon><SendOutlined /></template>-->
+          </a-button>
+        </template>
+      </a-input-search>
+    </div>
+    <small style="display: block; text-align: center; margin-top: 10px">
+      内容由AI生成，无法确保真实准确，仅供参考。
+    </small>
+  </a-layout-content>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref } from 'vue';
+// import { SendOutlined } from '@ant-design/icons-vue';
+
+</script>
diff --git a/src/views/Agent/Chat/components/HistoryChat.vue b/src/views/Agent/Chat/components/HistoryChat.vue
new file mode 100644
index 0000000..cee070a
--- /dev/null
+++ b/src/views/Agent/Chat/components/HistoryChat.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-layout-sider width="250" style="background: #fff">
+    <div class="logo" style="text-align: center; padding: 20px">
+      <img :src="props?.icon_url" alt="Logo" style="width: 100px" />
+    </div>
+    <a-menu mode="inline" theme="light">
+      <a-menu-item key="1">
+        <span>舆情脉络整理</span>
+        <span style="color: #8492ff; font-size: 12px">（对话式）</span>
+      </a-menu-item>
+      <a-menu-item key="2">历史对话</a-menu-item>
+      <a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
+      <a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
+      <a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
+      <a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
+      <a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
+      <a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
+    </a-menu>
+  </a-layout-sider>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+
+const props = defineComponent({
+  props: {
+    info: {
+      type: Object,
+      default: {},
+    },
+  },
+});
+console.log(props.info, 'props.info');
+</script>
+
+<style scoped>
+.logo {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/Agent/Chat/index.vue b/src/views/Agent/Chat/index.vue
index 4af74e1..037a273 100644
--- a/src/views/Agent/Chat/index.vue
+++ b/src/views/Agent/Chat/index.vue
@@ -1,119 +1,5 @@
 <template>
-  <!--    -->
-  <div>
-    <a-row class="grid-demo">
-      <a-col :span="24">
-        <div>24 - 100%</div>
-      </a-col>
-    </a-row>
-
-    <a-row class="grid-demo">
-      <a-col :span="4">
-        <a-space direction="vertical">
-          <a-space class="w-240px">1</a-space>
-          <a-space>2</a-space>
-
-        </a-space>
-      </a-col>
-      <a-col :span="20">
-        <div>
-          <div id="coze-chat-container"></div>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
+  <div>测试2</div>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { getChatAgent } from '@/api/all/agent';
-
-// 存储认证令牌
-const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
-
-// 模拟从API获取token
-const fetchToken = async () => {
-  // 实际开发中应替换为真实的 API 请求
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve('pat_' + Math.random().toString(36).substring(2, 15));
-    }, 500);
-  });
-};
-
-// 刷新token
-const refreshToken = async () => {
-  authToken.value = await fetchToken();
-};
-
-// 动态加载脚本函数
-const loadScript = (src) =>
-  new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.src = src;
-    script.onload = resolve;
-    script.onerror = reject;
-    document.head.appendChild(script);
-  });
-
-const query = reactive({
-  id: 1,
-});
-
-let cozeWebSDKConfig = reactive({
-  config: {},
-  auth: {},
-  userInfo: {},
-  ui: {},
-});
-let cozeWebSDK = null;
-const initChat = async () => {
-  const { code, data } = await getChatAgent(query.id);
-  if (code != 200) {
-    return false;
-  }
-  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
-  let config = data;
-  config.ui.chatBot.el = document.getElementById('coze-chat-container');
-  config.ui.width = '900px';
-  config.auth.onRefreshToken = function () {
-    return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
-  };
-  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
-  showChatPage();
-};
-
-const showChatPage = () => {
-  // 显示聊天页面
-  console.log(cozeWebSDK, 'chatClient');
-  cozeWebSDK.showChatBot();
-};
-
-onMounted(() => {
-  initChat();
-});
-</script>
-
-<style scoped>
-.app-container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.refresh-btn {
-  margin-top: 20px;
-  padding: 10px 20px;
-  background: #2ecc71;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.3s;
-}
-
-.refresh-btn:hover {
-  background: #27ae60;
-}
-</style>
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>