ai-chat-bot-interface 0.0.1 → 1.0.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "0.0.1",
+  "version": "1.0.0",
   "type": "module",
   "main": "index.js",
-  "description": "A AI chat bot interface",
+  "description": "A AI chat bot interface. (private)",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
+    "less": "^4.2.2",
     "vite": "^6.1.0"
   },
   "author": "lin_26",

package/src/App.vue

@@ -1,30 +1,18 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import ChatUi from './ChatUi.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div style="width: 100vw; height: 100vh;">
+    <chat-ui bot-id="123132132"
+             token="pat_123"
+             uid="5555"
+    />
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+<style>
+#app {
+  padding: 0;
 }
 </style>

package/src/ChatUi.less

@@ -0,0 +1,217 @@
+
+@import './assets/styles/public';
+
+.btn {
+  background-color: #fff;
+  padding: 8px;
+  outline: none;
+
+  &:hover {
+    border-color: transparent;
+  }
+}
+.board {
+  &_name {
+    font-size: 20px;
+    font-weight: 500;
+    margin: 10px 0;
+  }
+  &_desc {
+    display: inline-block;
+    font-size: 14px;
+    text-align: left;
+    padding: 12px 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    margin-bottom: 10px;
+  }
+  &_sug {
+    cursor: pointer;
+    margin-bottom: 8px;
+    padding: 6px 16px;
+    border-radius: 8px;
+    border: 1px solid rgba(68, 83, 130, 0.25);
+    &:hover {
+      background-color: #EAEAEA;
+    }
+  }
+}
+.cui {
+  &_box {
+    width: 100%;
+    height: 100%;
+    background-color: @bg-color;
+  }
+
+  &_wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    max-width: @max-width;
+    height: 100%;
+    margin: 0 auto;
+    background-color: @bg-color;
+  }
+
+  &_header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 16px;
+    height: 56px;
+    width: 100%;
+    line-height: 56px;
+    background-color: @bg-color;
+    border-bottom: 1px solid #1d1c2314;
+
+    .title {
+      .flexrsc();
+
+      .logo {
+        width: 24px;
+        height: 24px;
+        margin-right: 16px;
+      }
+    }
+
+    .btn {
+      font-size: 16px;
+      background-color: @bg-color;
+
+      &_group {
+        .flexrec()
+      }
+    }
+  }
+
+  &_content {
+    flex: 1;
+    width: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    background-color: @bg-color;
+    overflow-y: auto;
+
+    .replay {
+      .flexrss();
+      margin: 20px 0;
+
+      .name {
+        width: 100%;
+        text-align: left;
+        font-size: 14px;
+      }
+
+      .time {
+        font-size: 12px;
+        color: #999;
+      }
+
+      .avatar {
+        width: 32px;
+        height: 32px;
+        margin: 0 12px 0 0;
+      }
+
+      .box {
+        color: #000;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: left;
+        background-color: #fff;
+        padding: 12px 16px;
+        border-radius: @border-radius;
+
+        /deep/ .text {
+          white-space: pre-wrap;
+
+          a {
+            color: #039938;
+          }
+        }
+
+      }
+
+      .recm {
+        cursor: pointer;
+        padding: 6px 16px;
+        border: 1px solid @border-color;
+        border-radius: @border-radius;
+        margin: 8px 0;
+      }
+
+      &_content {
+        .flexcss();
+      }
+
+      &.role_user {
+        .flexres();
+
+        .avatar {
+          margin: 0 0 0 12px;
+        }
+
+        .name {
+          text-align: right;
+        }
+
+        .box {
+          background-color: #EAEAEA;
+        }
+      }
+    }
+  }
+
+  &_operate {
+    .flexrsc();
+    width: 100%;
+    padding: 10px 16px;
+    box-sizing: border-box;
+
+    .btn {
+      font-size: 16px;
+    }
+
+    .input {
+      flex: 1;
+      height: 38px;
+      line-height: 38px;
+      border: none;
+      font-size: 16px;
+      background-color: @bg-color;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      &_group {
+        .flexrec();
+        flex: 1;
+        margin-left: 10px;
+        box-sizing: border-box;
+        height: 48px;
+        padding: 4px 16px;
+        border-radius: 24px;
+        border: 1px solid @border-color;
+      }
+    }
+
+    .send {
+      .flexrcc();
+      width: 38px;
+    }
+  }
+
+  &_footer {
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    color: #1d1c2359;
+    background-color: #2e2e380a;
+    font-size: 12px;
+  }
+}

package/src/ChatUi.vue

@@ -1,10 +1,363 @@
 <template>
-  <div>我是聊天机器人:{{id}}</div>
+  <div class="cui_box">
+    <div class="cui_wrap">
+      <div class="cui_header">
+        <div class="title" @click.stop="queryHistoryList">
+          <img class="logo" :src="logo" alt="logo" style="width: 24px; height: 24px;"/>
+          {{ name }} {{ botId }}
+        </div>
+        <div class="btn_group">
+          <button class="btn">
+            <clear-icon/>
+          </button>
+          <button class="btn">
+            <close-icon/>
+          </button>
+        </div>
+      </div>
+      <div class="cui_content">
+        <div v-if="botInfo && botInfo.onboarding_info" style="text-align: left; margin-top: 50px;">
+          <div style="text-align: center">
+            <img :src="botInfo.icon_url" alt="icon" width="64" height="64"
+                 style="border-radius: 15px;"
+            />
+            <p class="board_name">{{ botInfo.name }}</p>
+          </div>
+
+          <div class="board_desc">{{ botInfo.onboarding_info.prologue }}</div>
+          <div class="flexcss">
+            <span v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
+                  :key="idx"
+                  class="board_sug"
+                  @click.stop="chatConv({code: item, text: item});"
+            >{{ item }}</span>
+          </div>
+        </div>
+        <template v-for="(conv, index) in historyList" :key="index">
+          <div v-if="conv.role === 'assistant'" class="replay role_sys">
+            <img class="avatar" :src="logo" alt="avatar">
+            <div class="replay_content">
+              <div class="name">{{ name }}  <!--<span class="time">12:30</span>--></div>
+              <div class="box">
+                <p class="text" v-html="conv.content"></p>
+                <div v-if="conv.extra.length && !isAnswering">
+                  <template v-for="(comp, idx) in conv.extra" :key="idx">
+                    <dishes-list :sku-list="comp.content.skuList" @select="handleCardTap"/>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="replay role_user">
+            <div class="replay_content">
+
+              <div class="name">User_{{ uid }} <!--<span class="time">12:30</span>--></div>
+              <div class="box">
+                <p class="text" v-html="conv.content"></p>
+                <div v-if="conv.extra.length && !isAnswering">
+                  <template v-for="(comp, idx) in conv.extra" :key="idx">
+                    <dishes-list :sku-list="comp.content.skuList"
+                                 @select="handleCardTap"
+                    />
+                  </template>
+                </div>
+              </div>
+            </div>
+            <img class="avatar" :src="avatar" alt="avatar">
+          </div>
+        </template>
+        <div ref="endTarget" style="height: 100px;" />
+      </div>
+      <div class="cui_operate">
+        <button class="btn" @click.stop="createConv">
+          <new-session-icon/>
+        </button>
+        <div class="input_group">
+          <input v-model="inputText" class="input" @keyup.enter="chatConv"/>
+          <div class="send" @click.stop="chatConv">
+            <send-icon :style="{ color: !isAnswering && inputText ? '#333': '#ccc'}"/>
+          </div>
+        </div>
+      </div>
+      <div class="cui_footer">Powered by Coze</div>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
-import {ref} from 'vue';
-const id = ref(1001);
+import {computed, nextTick, onMounted, ref} from 'vue';
+import ClearIcon from './components/icons/ClearIcon.vue';
+import CloseIcon from './components/icons/CloseIcon.vue';
+import NewSessionIcon from './components/icons/NewSessionIcon.vue';
+import SendIcon from './components/icons/SendIcon.vue';
+import mock from './mock';
+import {get, post} from './utils/request';
+import DishesCard from './components/DishesCard.vue';
+import DishesList from './components/DishesList.vue';
+
+const chatOptions = computed(() => {
+  return {
+    headers: {
+      Authorization: `Bearer ${props.token}`,
+      'Content-Type': 'application/json',
+    },
+  }
+});
+const conversationId = ref('');
+const isAnswering = ref(false);
+const historyList = ref([]);
+
+const props = defineProps({
+  logo: {
+    type: String,
+    default: 'https://prodstatic.weis1606.cn/api/smartFood/icon/weis_logo.png',
+  },
+  avatar: {
+    type: String,
+    default: 'https://prodstatic.weis1606.cn/api/smartFood/Nutribite/icons/home/icon_3.png',
+  },
+  name: {
+    type: String,
+    default: 'Weis Bot',
+  },
+  botId: {
+    type: String,
+    required: true,
+  },
+  uid: {
+    type: String,
+    required: true,
+    default: 'user',
+  },
+  token: {
+    type: String,
+    required: true
+  }
+
+});
+const endTarget = ref(null);
+const inputText = ref('');
+const botInfo = ref({});
+
+onMounted(async () => {
+  if (localStorage.getItem('conversationId')) {
+    conversationId.value = localStorage.getItem('conversationId');
+    await queryBotInfo();
+    await queryHistoryList();
+  } else {
+    await createConv();
+  }
+  scrollToEnd();
+});
+
+const createConv = async () => {
+  const res = await post(
+      'https://api.coze.cn/v1/conversation/create',
+      {'bot_id': props.botId, 'connector_id': '999'},
+      {...chatOptions.value},
+  );
+  console.log(res);
+  if (res.code === 0 && res.data) {
+    conversationId.value = res.data.id || '';
+    localStorage.setItem('conversationId', conversationId.value);
+    historyList.value = [];
+    await queryBotInfo();
+  }
+};
+// const messageCreate = async () => {
+//   console.log(chatOptions.value);
+//   const res = await post(
+//       `https://api.coze.cn/v1/conversation/message/create?conversation_id=${conversationId.value}`,
+//       { "role":"user","content":`#userid_${props.uid}`,"content_type":"text"},
+//       {...chatOptions.value});
+// };
+const messageCreate = async () => {
+  const res = await fetch(
+      `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
+      {
+        method: 'POST',
+        headers: {
+          ...chatOptions.value.headers,
+          // 'Content-Type': 'text/event-stream',
+        },
+        body: JSON.stringify({
+          bot_id: props.botId,
+          user_id: props.uid,
+          stream: true,
+          connector_id: '999',
+          additional_messages: [
+            {
+              'role': 'user',
+              'content_type': 'text',
+              'content': `#userid_${props.uid}`,
+            }],
+        }),
+        credentials: 'same-origin', // 默认同源策略
+        mode: 'cors', // 默认跨域模式
+        cache: 'default', // 默认缓存策略
+      },
+  );
+};
+const chatConv = async (data) => {
+  console.log('== user send ==');
+  let txt = '';
+  if (!(!isAnswering.value && (inputText || data.code))) {
+    return;
+  }
+  historyList.value.push({
+    conversation_id: conversationId.value,
+    bot_id: props.botId,
+    role: 'user',
+    content: data.text ? data.text : inputText.value,
+    status: 'ended',
+    extra: [],
+  });
+  const res = await fetch(
+      `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
+      {
+        method: 'POST',
+        headers: {
+          ...chatOptions.value.headers,
+          // 'Content-Type': 'text/event-stream',
+        },
+        body: JSON.stringify({
+          bot_id: props.botId,
+          user_id: props.uid,
+          stream: true,
+          connector_id: '999',
+          additional_messages: [
+            {
+              'role': 'user',
+              'content_type': 'text',
+              'content': data.code ? data.code : inputText.value, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
+            }],
+        }),
+        credentials: 'same-origin', // 默认同源策略
+        mode: 'cors', // 默认跨域模式
+        cache: 'default', // 默认缓存策略
+      },
+  );
+  historyList.value.push({
+    conversation_id: '',
+    bot_id: '',
+    role: 'assistant',
+    content: '',
+    status: 'answering',
+    extra: [],
+  });
+  scrollToEnd();
+  inputText.value = '';
+  const idx = historyList.value.length - 1;
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder('utf-8');
+  let buffer = '';
+  // 逐块读取数据
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      console.log('Stream has ended.');
+      isAnswering.value = false;
+      historyList.value[idx].status = 'ended';
+      scrollToEnd();
+      break;
+    }
+
+    // 解码数据块
+    const chunk = decoder.decode(value, {stream: true});
+    buffer += chunk;
+
+    // 处理数据块
+    const lines = buffer.split('\n');
+    buffer = lines.pop(); // 保留未处理的片段
+
+    lines.forEach(line => {
+      if (line.trim().length > 0 && line.trim().startsWith('data:')) {
+        const str = line.replace(/^data:\s*/, '');
+        const strObj = JSON.parse(str);
+        console.log('Received:', strObj);
+        isAnswering.value = true;
+        historyList.value[idx].status = 'answering';
+        if (!historyList.value[idx].bot_id && strObj.bot_id) {
+          historyList.value[idx].bot_id = strObj.bot_id;
+        }
+        if (!historyList.value[idx].conversation_id && strObj.conversation_id) {
+          historyList.value[idx].conversation_id = strObj.conversation_id;
+        }
+        if (strObj.hasOwnProperty('content')
+            && strObj.hasOwnProperty('content_type')
+            && strObj.content_type === 'text'
+            && strObj.hasOwnProperty('type')
+            && strObj.type === 'answer') {
+          txt += JSON.parse(str).content;
+          historyList.value[idx].content = handleText(historyList.value[idx].content + JSON.parse(str).content);
+        } else if (strObj.hasOwnProperty('type')
+            && strObj.type === 'tool_response') {
+          const extraObj = JSON.parse(strObj.content);
+          historyList.value[idx].extra.push({
+            type: strObj.type,
+            content: extraObj,
+          });
+        }
+      }
+    });
+  }
+  console.log('====', historyList.value);
+  console.log('== txt ==', txt);
+};
+
+const queryHistoryList = async () => {
+  const res = await post(
+      `https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversationId.value}`,
+      {order: 'asc'},
+      {...chatOptions.value},
+  );
+  if (res.code === 0 && res.data && res.data.length) {
+    historyList.value = [];
+    res.data.forEach(row => {
+      historyList.value.push({
+        conversation_id: row.conversation_id,
+        bot_id: row.bot_id,
+        role: row.role,
+        content: row.content,
+        status: 'ended',
+        extra: [],
+      });
+    });
+  }
+};
+
+const queryBotInfo = async () => {
+  const res = await get(
+      `https://api.coze.cn/v1/bot/get_online_info?bot_id=${props.botId}`,
+      {...chatOptions.value},
+  );
+  console.log(res);
+  if (res.code === 0 && res.data) {
+    botInfo.value = {...res.data};
+  }
+};
+
+const handleText = (str) => {
+  // console.log(str);
+  return str.replaceAll(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/ig, '<a href="$2" target="_blank">[$1]</a>');
+};
+
+const handleCardTap = ({type}) => {
+  switch (type) {
+    case 'change':
+      chatConv({code: '換一套菜品', text: '換一套菜品'});
+      break;
+  }
+};
+
+const scrollToEnd = () => {
+  nextTick(() => {
+    endTarget.value.scrollIntoView();
+  })
+}
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+@import "./ChatUi";
+</style>

package/src/assets/styles/public.less

@@ -0,0 +1,149 @@
+@border-color: rgba(68, 83, 130, 0.25);
+@border-radius: 8px;
+@box-max: 290px;
+@max-width: 630px;
+@bg-color: #F3F4F5;
+
+.flexr {
+  display: flex;
+  flex-direction: row;
+}
+
+.flexc {
+  display: flex;
+  flex-direction: column;
+}
+.flexrss {
+  .flexr();
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.flexrsc {
+  .flexr();
+  justify-content: flex-start;
+  align-items: center;
+}
+.flexrse {
+  .flexr();
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.flexrsst {
+  .flexr();
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.flexrbs {
+  .flexr();
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.flexrbc {
+  .flexr();
+  justify-content: space-between;
+  align-items: center;
+}
+.flexrac {
+  .flexr();
+  justify-content: space-around;
+  align-items: center;
+}
+.flexrbe {
+  .flexr();
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.flexrcs {
+  .flexr();
+  justify-content: center;
+  align-items: flex-start;
+}
+.flexrcc {
+  .flexr();
+  justify-content: center;
+  align-items: center;
+}
+.flexrce {
+  .flexr();
+  justify-content: center;
+  align-items: flex-end;
+}
+.flexres {
+  .flexr();
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.flexrec {
+  .flexr();
+  justify-content: flex-end;
+  align-items: center;
+}
+.flexree {
+  .flexr();
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.flexcss {
+  .flexc();
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.flexcsc {
+  .flexc();
+  justify-content: flex-start;
+  align-items: center;
+}
+.flexcse {
+  .flexc();
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.flexccs {
+  .flexc();
+  justify-content: center;
+  align-items: flex-start;
+}
+.flexccc {
+  .flexc();
+  justify-content: center;
+  align-items: center;
+}
+.flexcce {
+  .flexc();
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.flexcbs {
+  .flexc();
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.flexcbc {
+  .flexc();
+  justify-content: space-between;
+  align-items: center;
+}
+.flexcbe {
+  .flexc();
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.flexces {
+  .flexc();
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.flexcec {
+  .flexc();
+  justify-content: flex-end;
+  align-items: center;
+}
+.flexcee {
+  .flexc();
+  justify-content: flex-end;
+  align-items: flex-end;
+}

package/src/components/DishesCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="dishes_wrap" @click.stop="testFunc">
+    <img class="img" :src="info.primaryImgUrl" alt="img" />
+    <div>
+      <div class="name">
+        <span>{{info.skuname}}</span>
+        <span>×1</span>
+      </div>
+      <div class="sub">{{subStr}}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    required: true
+  }
+})
+
+const subStr = computed(() => {
+  return `热量${props.info.energy}kcal，蛋白质${props.info.protein}g，脂肪${props.info.fat}g，碳水${props.info.carbonwater}g`
+})
+
+</script>
+
+<style scoped lang="less">
+@import 'src/assets/styles/public';
+
+.dishes {
+  &_wrap {
+    display: grid;
+    grid-template-columns: 72px 1fr;
+    grid-column-gap: 10px;
+    background-color: @bg-color;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px 0;
+
+    .img {
+      width: 100%;
+      border-radius: 8px;
+    }
+    .name {
+      .flexrbs();
+      font-weight: 600;
+      font-size: 14px;
+      color: #000;
+      line-height: 16px;
+    }
+    .sub {
+      margin-top: 10px;
+      font-weight: 400;
+      font-size: 10px;
+      color: #666;
+      line-height: 12px;
+    }
+  }
+}
+</style>

package/src/components/DishesList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="dl_wrap">
+    <template v-for="cate in skuList" :key="cate.category">
+      <div v-if="cate.list && cate.list.length">
+        <p class="title">{{ cate.category }}</p>
+        <div>
+          <template v-for="dList in cate.list" :key="dList.id">
+            <dishes-card v-for="(info, idx) in dList.categoryList" :key="idx" :info="info"/>
+          </template>
+        </div>
+      </div>
+    </template>
+    <div class="btn_group">
+      <div class="btn btn_1" @click.stop="handleBtn('change')">換一套菜品</div>
+      <div class="btn btn_2" @click.stop="handleBtn('order')">去下單</div>
+    </div>
+  </div>
+
+
+</template>
+
+<script setup>
+import DishesCard from './DishesCard.vue';
+
+const props = defineProps({
+  skuList: {
+    type: Array,
+    required: true,
+    default: () => ([]),
+  },
+});
+const Emits = defineEmits(['select']);
+
+
+const handleBtn = (type) => {
+  Emits('select', {type});
+};
+</script>
+
+<style scoped lang="less">
+@import 'src/assets/styles/public';
+
+.dl {
+  &_wrap {
+    max-width: 320px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .btn {
+      cursor: pointer;
+      width: 100%;
+      height: 38px;
+      line-height: 38px;
+      background-color: #E6F5EB;
+      border-radius: 19px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 13px;
+      color: #039938;
+
+      &_2 {
+        color: #fff;
+        background-color: #039938;
+      }
+
+      &_group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-column-gap: 10px;
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+</style>

package/src/components/icons/ClearIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg class="icon-icon icon-icon-coz_broom " width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"
+       xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9 2V6L4 6C2.89543 6 2 6.89543 2 8V21C2 22.1046 2.89543 23 4 23H20C21.1046 23 22 22.1046 22 21V8C22 6.89543 21.1046 6 20 6L15 6V2C15 0.895431 14.1046 0 13 0H11C9.89543 0 9 0.895431 9 2ZM13 2V8H20V12H4V8H11V2H13ZM4 14H20V21H9V18C9 17.4477 8.55228 17 8 17C7.44772 17 7 17.4477 7 18V21H4L4 14Z"></path>
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/CloseIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M4.96977 17.7929C4.57925 18.1834 4.57925 18.8166 4.96977 19.2071C5.3603 19.5976 5.99346 19.5976 6.38399 19.2071L12.1769 13.4142L17.9698 19.2071C18.3603 19.5976 18.9935 19.5976 19.384 19.2071C19.7745 18.8166 19.7745 18.1834 19.384 17.7929L13.5911 12L19.384 6.20711C19.7745 5.81658 19.7745 5.18342 19.384 4.79289C18.9935 4.40237 18.3603 4.40237 17.9698 4.79289L12.1769 10.5858L6.38399 4.79289C5.99347 4.40237 5.3603 4.40237 4.96978 4.79289C4.57925 5.18342 4.57925 5.81658 4.96978 6.20711L10.7627 12L4.96977 17.7929Z"></path>
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/NewSessionIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24"
+       fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6.94025 19.5916L6.23607 21H12C12.4316 21 12.856 20.9696 13.2714 20.9109C13.5046 20.9691 13.7487 21 14 21H15V22C15 22.1951 15.0186 22.3858 15.0542 22.5705C14.0845 22.8501 13.0597 23 12 23H4.61803C3.87465 23 3.39116 22.2177 3.72361 21.5528L4.48405 20.0319C2.3399 18.0247 1 15.1688 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 13.0597 22.8501 14.0845 22.5705 15.0542C22.3858 15.0186 22.1951 15 22 15H21V14C21 13.7487 20.9691 13.5046 20.9109 13.2714C20.9696 12.856 21 12.4316 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.5928 4.09379 16.9269 5.85088 18.5718L6.94025 19.5916Z"></path>
+    <path
+        d="M8 8C7.44772 8 7 8.44772 7 9 7 9.55229 7.44772 10 8 10H15C15.5523 10 16 9.55229 16 9 16 8.44772 15.5523 8 15 8H8zM7 14C7 13.4477 7.44772 13 8 13H12C12.5523 13 13 13.4477 13 14 13 14.5523 12.5523 15 12 15H8C7.44772 15 7 14.5523 7 14zM18 13C18.5523 13 19 13.4477 19 14V17H22C22.5523 17 23 17.4477 23 18 23 18.5523 22.5523 19 22 19H19V22C19 22.5523 18.5523 23 18 23 17.4477 23 17 22.5523 17 22V19H14C13.4477 19 13 18.5523 13 18 13 17.4477 13.4477 17 14 17H17V14C17 13.4477 17.4477 13 18 13z"></path>
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/SendIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24"
+       fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M21.4159 13.3153C21.8961 13.0536 22.1965 12.5506 22.1965 11.9998C22.1965 11.449 21.8961 10.9483 21.4159 10.6865L3.99982 1.25701C3.53551 1.00437 2.98699 1.01575 2.53179 1.2866C2.07659 1.55744 1.80347 2.03768 1.80347 2.57027L3.725 10.0755L11.8947 11.2715C12.363 11.2715 12.7414 11.5969 12.7414 11.9998C12.7414 12.4026 12.363 12.7281 11.8947 12.7281C7.2906 13.4031 4.56846 13.799 3.72825 13.9159L1.80347 21.4293C1.80347 21.9619 2.07659 22.4421 2.53179 22.7153C2.98699 22.9861 3.53551 22.9975 3.99982 22.7448L21.4159 13.3153Z"></path>
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/mock.js

@@ -0,0 +1,162 @@
+export default [
+  {
+    "conversation_id": "7472317677525188619",
+    "bot_id": "7468975471649194018",
+    "role": "assistant",
+    "content": "您好，我是Nutribite",
+    "status": "ended",
+    "extra": []
+  },
+  {
+    conversation_id: '7472317677525188619',
+    bot_id: '7468975471649194018',
+    role: `user_555`,
+    content: '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
+    status: 'ended',
+    extra: [],
+  },
+  {
+    "conversation_id": "7472317677525188619",
+    "bot_id": "7468975471649194018",
+    "role": "assistant",
+    "content": "为你生成的一天1600kcal套餐如下：\n- **早餐（约450kcal）**：\n    - 火腿汁烧豆腐，能量82kcal，蛋白质8.7g，脂肪3.1g，碳水化合物4.7g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024122015441833302.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 五彩鸡块，能量156kcal，蛋白质16.5g，脂肪6.8g，碳水化合物7.2g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024120910310309135.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 素炒云南小瓜，能量39kcal，蛋白质1.7g，脂肪1.3g，碳水化合物5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318161342225.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 牛肉焖饭，能量178kcal，蛋白质7.6g，脂肪2.4g，碳水化合物31.6g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318062384767.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n- **午餐（约540kcal）**：\n    - 粟米蒸水蛋，能量117kcal，蛋白质9.9g，脂肪6.6g，碳水化合物4.5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318155462227.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 豉油鸡扒，能量174kcal，蛋白质26.2g，脂肪6.8g，碳水化合物1.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318254931832.png?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 清炒菠菜，能量49kcal，蛋白质4g，脂肪1.5g，碳水化合物4.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010317554302323.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 红米飯，能量182kcal，蛋白质3.4g，脂肪0.1g，碳水化合物41.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318002606875.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n- **晚餐（约450kcal）**：\n    - 番茄大虾面，能量430kcal，蛋白质26.3g，脂肪5.6g，碳水化合物68.5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024092513400322999.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a> \n\n这份套餐营养较为均衡，包含了蛋白质、碳水化合物、脂肪、维生素和矿物质等多种营养成分，希望能满足你的需求。  为你生成的一天1600kcal套餐如下：\n- **早餐（约450kcal）**：\n    - 火腿汁烧豆腐，能量82kcal，蛋白质8.7g，脂肪3.1g，碳水化合物4.7g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024122015441833302.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 五彩鸡块，能量156kcal，蛋白质16.5g，脂肪6.8g，碳水化合物7.2g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024120910310309135.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 素炒云南小瓜，能量39kcal，蛋白质1.7g，脂肪1.3g，碳水化合物5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318161342225.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 牛肉焖饭，能量178kcal，蛋白质7.6g，脂肪2.4g，碳水化合物31.6g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318062384767.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n- **午餐（约540kcal）**：\n    - 粟米蒸水蛋，能量117kcal，蛋白质9.9g，脂肪6.6g，碳水化合物4.5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318155462227.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 豉油鸡扒，能量174kcal，蛋白质26.2g，脂肪6.8g，碳水化合物1.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318254931832.png?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 清炒菠菜，能量49kcal，蛋白质4g，脂肪1.5g，碳水化合物4.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010317554302323.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n    - 红米飯，能量182kcal，蛋白质3.4g，脂肪0.1g，碳水化合物41.9g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2025010318002606875.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a>\n- **晚餐（约450kcal）**：\n    - 番茄大虾面，能量430kcal，蛋白质26.3g，脂肪5.6g，碳水化合物68.5g，<a href=\"https://prodstatic.weis1606.cn/api/diet/2024092513400322999.jpg?x-oss-process=image/resize,h_750\" target=\"_blank\">[点击查看]</a> \n\n这份套餐营养较为均衡，包含了蛋白质、碳水化合物、脂肪、维生素和矿物质等多种营养成分，希望能满足你的需求。  ",
+    "status": "ended",
+    "extra": [
+      {
+        "type": "tool_response",
+        "content": {
+          "code": 0,
+          "skuList": [
+            {
+              "category": "早餐",
+              "totalKcal": 450,
+              "sequentialDays": 1,
+              "list": [
+                {
+                  "id": 3,
+                  "name": "五彩雞塊饭",
+                  "categoryList": [
+                    {
+                      "energy": 82,
+                      "skuname": "火腿汁燒豆腐",
+                      "skunameEn": "Braised Tofu in Ham Sauce",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2024122015441833302.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 8.7,
+                      "fat": 3.1,
+                      "carbonwater": 4.7
+                    },
+                    {
+                      "fat": 6.8,
+                      "carbonwater": 7.2,
+                      "energy": 156,
+                      "skuname": "五彩雞塊",
+                      "skunameEn": "Five-Colored Chicken Cubes",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2024120910310309135.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 16.5
+                    },
+                    {
+                      "skuname": "素炒雲南小瓜",
+                      "skunameEn": "Stir-Fried Yunnan Zucchini",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010318161342225.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 1.7,
+                      "fat": 1.3,
+                      "carbonwater": 5,
+                      "energy": 39
+                    },
+                    {
+                      "carbonwater": 31.6,
+                      "energy": 178,
+                      "skuname": "牛肉燜飯",
+                      "skunameEn": "Stewed Rice with Braised Beef",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010318062384767.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 7.6,
+                      "fat": 2.4
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "category": "午餐",
+              "totalKcal": 540,
+              "sequentialDays": 1,
+              "list": [
+                {
+                  "categoryList": [
+                    {
+                      "carbonwater": 4.5,
+                      "energy": 117,
+                      "skuname": "粟米蒸水蛋",
+                      "skunameEn": "Steamed Eggs with Corn",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010318155462227.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 9.9,
+                      "fat": 6.6
+                    },
+                    {
+                      "energy": 174,
+                      "skuname": "豉油雞扒",
+                      "skunameEn": "Grilled Chicken Steak with Soy Sauce",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010318254931832.png?x-oss-process=image/resize,h_750",
+                      "protein": 26.2,
+                      "fat": 6.8,
+                      "carbonwater": 1.9
+                    },
+                    {
+                      "carbonwater": 4.9,
+                      "energy": 49,
+                      "skuname": "清炒菠菜",
+                      "skunameEn": "Stir-Fried Spinach",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010317554302323.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 4,
+                      "fat": 1.5
+                    },
+                    {
+                      "energy": 182,
+                      "skuname": "紅米飯",
+                      "skunameEn": "Red rice",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2025010318002606875.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 3.4,
+                      "fat": 0.1,
+                      "carbonwater": 41.9
+                    }
+                  ],
+                  "id": 4,
+                  "name": "豉油雞扒饭"
+                }
+              ]
+            },
+            {
+              "sequentialDays": 1,
+              "list": [
+                {
+                  "id": 5,
+                  "name": "番茄大蝦麵",
+                  "categoryList": [
+                    {
+                      "energy": 430,
+                      "skuname": "番茄大蝦麵",
+                      "skunameEn": "Tomato Prawn Noodles",
+                      "primaryImgUrl": "https://prodstatic.weis1606.cn/api/diet/2024092513400322999.jpg?x-oss-process=image/resize,h_750",
+                      "protein": 26.3,
+                      "fat": 5.6,
+                      "carbonwater": 68.5
+                    }
+                  ]
+                }
+              ],
+              "category": "晚餐",
+              "totalKcal": 450
+            },
+            {
+              "totalKcal": 360,
+              "sequentialDays": 1,
+              "list": [],
+              "category": "加餐"
+            }
+          ],
+          "msg": "success"
+        }
+      }
+    ]
+  }
+]

package/src/utils/request.js

@@ -0,0 +1,54 @@
+// 封装 fetch 函数
+function customFetch(url, options = {}) {
+  // 默认配置
+  const defaultOptions = {
+    method: 'GET', // 默认为 GET 请求
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    },
+    body: null, // 默认没有请求体
+    credentials: 'same-origin', // 默认同源策略
+    mode: 'cors', // 默认跨域模式
+    cache: 'default' // 默认缓存策略
+  };
+
+  // 合并用户传入的选项和默认选项
+  const finalOptions = { ...defaultOptions, ...options };
+
+  console.log('====finalOptions====', finalOptions);
+  // 如果是 POST 请求，确保有 body
+  if (finalOptions.method.toUpperCase() === 'POST' && !finalOptions.body) {
+    throw new Error('POST request must have a body');
+  }
+
+  // 发送 fetch 请求
+  return fetch(url, finalOptions)
+  .then(response => {
+    if (!response.ok) {
+      // 如果响应状态码不是 2xx，抛出错误
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json(); // 默认解析为 JSON
+  })
+  .catch(error => {
+    console.error('Fetch error:', error);
+    throw error; // 向外抛出错误
+  });
+}
+
+// 使用封装的 fetch 函数发送 GET 请求
+export function get(url, options = {}) {
+  return customFetch(url, { ...options, method: 'GET' });
+}
+
+// 使用封装的 fetch 函数发送 POST 请求
+export function post(url, data={}, options = {}) {
+  return customFetch(url, {
+    ...options,
+    method: 'POST',
+    body: JSON.stringify(data)
+  });
+}
+
+