update

src/components/Chat.vue

@@ -184,6 +184,8 @@ const chatArea = ref(null); // 對話框
 
 // 捲軸滾動到使用者訊息底下第一則回覆
 const scrollToMessage = () => {
+  console.log("scrollToMessage");
+
   // 使用 nextTick 確保 DOM 已更新
   nextTick(() => {
     // 取得所有的 .message.message-out 元素
@@ -197,6 +199,9 @@ const scrollToMessage = () => {
       const nextMessageContent =
         lastMessageOut.parentElement.nextElementSibling;
 
+      console.log("lastMessageOut", lastMessageOut);
+      console.log("nextMessageContent", nextMessageContent);
+
       if (
         nextMessageContent &&
         nextMessageContent.classList.contains("message-content")
@@ -211,7 +216,7 @@ const scrollToMessage = () => {
             top: scrollTop - 45,
             behavior: "smooth",
           });
-        }, 100);
+        }, 300);
       }
     }
   });
@@ -1464,7 +1469,7 @@ async function getArviews(route, text, type = "") {
 
   messages.value.push({
     label: "text",
-    author: "ai",
+    author: "user",
     body: text,
   });
 
@@ -1517,13 +1522,17 @@ function changeLocation(item) {
 // 顯示平面圖
 function assignMapImg(item) {
   console.log("顯示平面圖 item", item);
+
   let name;
-  if (item.value === "B1 平面圖") {
+
+  if (item === "B1 平面圖") {
     name = "All_b1";
-  } else if (item.value === "1F 平面圖") {
+  } else if (item === "1F 平面圖") {
     name = "All_1";
-  } else if (item.value === "2F 平面圖") {
+  } else if (item === "2F 平面圖") {
     name = "All_2";
+  } else {
+    name = "1F";
   }
 
   messages.value.push({
@@ -1680,11 +1689,13 @@ async function selectCategory(value, index) {
       body: t("location_guide"),
     });
 
-    messages.value.push({
-      label: "text",
-      author: "ai",
-      body: t("select_location"),
-    });
+    assignMapImg("1F"); // 顯示 1F 平面圖
+
+    // messages.value.push({
+    //   label: "text",
+    //   author: "ai",
+    //   body: t("select_location"),
+    // });
 
     // 掃描 QR Code
     // messages.value.push({
@@ -1699,11 +1710,11 @@ async function selectCategory(value, index) {
     //   body: mapList,
     // });
 
-    messages.value.push({
-      label: "location",
-      author: "ai",
-      body: locationList,
-    });
+    // messages.value.push({
+    //   label: "location",
+    //   author: "ai",
+    //   body: locationList,
+    // });
   } else if (value === "美食/伴手禮") {
     // getAd("美食伴手禮");
 
@@ -1908,13 +1919,13 @@ const menuList = reactive([
 ]);
 
 // 美食伴手禮 or 購物及優惠類別篩選
-async function findBrand(value) {
+async function findBrand(value, text) {
   console.log("findBrand", value);
 
   messages.value.push({
     label: "text",
     author: "user",
-    body: value,
+    body: t(text),
   });
 
   if (value === "館外店家") {
@@ -1970,13 +1981,13 @@ async function getStaticTickets(type) {
 }
 
 // 秘境花園觀景台對話
-function handleObservationDialog(value) {
+function handleObservationDialog(value, text) {
   console.log("value", value);
 
   messages.value.push({
     label: "text",
     author: "user",
-    body: value,
+    body: t(text),
   });
 
   if (value === "線上購票") {
@@ -2084,7 +2095,12 @@ let gardenRouteList = reactive([
 ]);
 
 // 購物及優惠對話
-function handleShoppingDialog(value) {
+function handleShoppingDialog(value, text) {
+  messages.value.push({
+    label: "text",
+    author: "ai",
+    body: t(text),
+  });
   console.log("value", value);
 
   if (value === "購物品牌查詢") {
@@ -2416,6 +2432,11 @@ function recStart() {
     // 開始計時
     timer = setInterval(() => {
       recordTime.value += 1;
+
+      // 檢查錄音時間是否超過 60 秒
+      if (recordTime.value >= 60) {
+        recStop(); // 停止錄音
+      }
     }, 1000);
 
     rec.start();
@@ -2433,18 +2454,6 @@ function recStop() {
       // rec.close(); // 釋放錄音資源 (若不釋放系統或瀏覽器將持續提示在錄音中)
       // rec = null;
 
-      // // 韓文轉 wav 格式，其他語言轉 mp3 格式
-      // let lang = getLang();
-      // if (lang === "ko") {
-      //   audioFile.value = new File([blob], "recording.wav", {
-      //     type: "audio/wav",
-      //   });
-      // } else {
-      //   audioFile.value = new File([blob], "recording.mp3", {
-      //     type: "audio/mp3",
-      //   });
-      // }
-
       // 將 Blob 轉換為 File 對象
       audioFile.value = new File([blob], "recording.mp3", {
         type: "audio/mp3",
@@ -2711,28 +2720,46 @@ function videoSrcBg() {
   }
 }
 
-// 時間內無動作需 reload
+// 五分鐘內無動作需 reload
 let timeout;
+let elapsedTime = 0; // 追蹤經過的時間
+let intervalId;
 
 const resetTimeout = () => {
   clearTimeout(timeout);
+  clearInterval(intervalId); // 停止當前的計時器
+  elapsedTime = 0; // 重置經過時間
+  intervalId = setInterval(() => {
+    elapsedTime += 1; // 每秒增加
+    if (elapsedTime >= 300) {
+      // 5 分鐘 = 300 秒
+      window.location.reload(); // 重新整理網頁
+    }
+  }, 1000); // 每秒更新一次
+
   timeout = setTimeout(() => {
+    clearInterval(intervalId); // 取消計時
     window.location.reload(); // 重新整理網頁
-  }, 5 * 60 * 1000); // 5 分鐘 = 5 * 60 * 1000 毫秒
+  }, 300000); // 5 分鐘 = 5 * 60 * 1000 毫秒
 };
 
 const startInactivityTimer = () => {
-  console.log("startInactivityTimer", timeout);
-
-  window.addEventListener("mousemove", resetTimeout);
-  window.addEventListener("keydown", resetTimeout);
+  window.addEventListener("mousemove", resetTimeout); // 桌面滑鼠移動
+  window.addEventListener("keydown", resetTimeout); // 桌面按鍵
+  window.addEventListener("touchstart", resetTimeout); // 手機觸碰
+  window.addEventListener("touchmove", resetTimeout); // 手機滑動
+  window.addEventListener("touchend", resetTimeout); // 手機觸碰結束
   resetTimeout(); // 初始化計時器
 };
 
 const stopInactivityTimer = () => {
   clearTimeout(timeout);
+  clearInterval(intervalId); // 停止計時
   window.removeEventListener("mousemove", resetTimeout);
   window.removeEventListener("keydown", resetTimeout);
+  window.removeEventListener("touchstart", resetTimeout);
+  window.removeEventListener("touchmove", resetTimeout);
+  window.removeEventListener("touchend", resetTimeout);
 };
 
 onMounted(() => {
@@ -2980,7 +3007,9 @@ onBeforeUnmount(() => {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="handleObservationDialog(item.value)">
+                  <button
+                    @click="handleObservationDialog(item.value, item.text)"
+                  >
                     {{ t(item.text) }}
                   </button>
                 </div>
@@ -2998,7 +3027,9 @@ onBeforeUnmount(() => {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="handleObservationDialog(item.value)">
+                  <button
+                    @click="handleObservationDialog(item.value, item.text)"
+                  >
                     {{ t(item.text) }}
                   </button>
                 </div>
@@ -3067,7 +3098,7 @@ onBeforeUnmount(() => {
                 </v-list>
               </v-menu> -->
 
-              <v-menu location="top">
+              <!-- <v-menu location="top">
                 <template v-slot:activator="{ props }">
                   <v-btn class="mt-5 py-2" color="primary" dark v-bind="props">
                     <p class="me-2">{{ t("view_floor_plan") }}</p>
@@ -3093,7 +3124,7 @@ onBeforeUnmount(() => {
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
-              </v-menu>
+              </v-menu> -->
             </div>
 
             <!-- <v-select
@@ -3345,7 +3376,7 @@ onBeforeUnmount(() => {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="findBrand(item.value)">
+                  <button @click="findBrand(item.value, item.text)">
                     {{ t(item.text) }}
                   </button>
                 </div>
@@ -3371,7 +3402,7 @@ onBeforeUnmount(() => {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="handleShoppingDialog(item.value)">
+                  <button @click="handleShoppingDialog(item.value, item.text)">
                     {{ t(item.text) }}
                   </button>
                 </div>
@@ -3397,7 +3428,7 @@ onBeforeUnmount(() => {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="findBrand(item.value)">
+                  <button @click="findBrand(item.value, item.text)">
                     {{ t(item.text) }}
                   </button>
                 </div>
@@ -3833,7 +3864,14 @@ onBeforeUnmount(() => {
               <tr v-for="(row, rowIndex) in menuList" :key="rowIndex">
                 <td v-for="(item, itemIndex) in row" :key="itemIndex">
                   <button @click="selectCategory(item.value, itemIndex)">
-                    <img :src="getImageUrl(item.imgSrc)" alt="" class="icon" />
+                    <img
+                      :src="getImageUrl(item.imgSrc)"
+                      alt=""
+                      class="icon"
+                      :style="{
+                        opacity: item.value === '趣味濾鏡' ? '0.5' : '1',
+                      }"
+                    />
                     <p>{{ t(`${item.text}`) }}</p>
                   </button>
                 </td>

src/language/en.json

@@ -34,7 +34,7 @@
   "close": "Close",
   "recording": "Recording",
   "second": "second",
-  "stop_recording": "After the conversation is complete,<br>please press the stop button to end the recording.",
+  "stop_recording": "After the conversation is complete,<br>please press the stop button to end the recording<br>(The duration should not exceed 60 seconds)",
   "speech_error": "Speech recognition error. Please re-record.",
   "return_to_ai_support": "Back to AI Support",
   "search_brand": "Search Brand",

src/language/ja.json

@@ -34,7 +34,7 @@
   "close": "閉じる",
   "recording": "録音中",
   "second": "秒",
-  "stop_recording": "会話終了後、停止ボタンを押して録音を終了してください",
+  "stop_recording": "会話終了後、停止ボタンを押して録音を終了してください<br>（秒数は60秒を超えないようにしてください）",
   "speech_error": "音声認識に誤りがあります。もう一度録音してください。",
   "return_to_ai_support": "AI サポートに戻る",
   "search_brand": "ブランドを検索",
@@ -101,38 +101,38 @@
     }
   },
   "location": {
-    "b1_din_tai_fung": "B1 鼎泰豐",
-    "b1_centre": "B1 中環",
-    "b1_elevator_no_2": "B1 2號電梯",
-    "b1_elevator_no_4": "B1 4號電梯",
-    "b1_elevator_no_3": "B1 3號電梯",
-    "1f_south_xinyi": "1F 信義環",
-    "1f_elevator_no_3": "1F 3號電梯",
-    "2f_elevator_no_3": "2F 3號電梯",
-    "88f_observatory": "88F 觀景台",
-    "89f_observatory": "89F 觀景台"
+    "b1_din_tai_fung": "B1 鼎泰豐・ディンタイフォン",
+    "b1_centre": "B1 セントラル",
+    "b1_elevator_no_2": "B1 2号エレベーター",
+    "b1_elevator_no_4": "B1 4号エレベーター",
+    "b1_elevator_no_3": "B1 3号エレベーター",
+    "1f_south_xinyi": "1F 信義サークル",
+    "1f_elevator_no_3": "1F 3号エレベーター",
+    "2f_elevator_no_3": "2F 3号エレベーター",
+    "88f_observatory": "88F 展望台",
+    "89f_observatory": "89F 展望台"
   },
   "navigation": {
-    "observatory_ticket_office": "觀景台售票處",
+    "observatory_ticket_office": "展望台チッケト売り場",
     "atm": "ATM",
-    "items_and_luggage_storage": "置物櫃",
-    "metro_station": "捷運",
-    "taxi_station": "計程車乘車處",
-    "101f_queue": "101F 排隊處",
-    "91f_outdoor_area": "91F 戶外區",
-    "ice_warmed_water_dispenser": "飲水機",
-    "snackable_souvenirs": "伴手禮區",
-    "high_rise_restaurant_reception": "景觀餐廳櫃台",
-    "accessible_facilities": "無障礙廁所",
-    "tax_refund_currency_exchange": "退稅/外幣兌換櫃台",
-    "service_counter": "客服",
-    "service_counter_parking_discount": "客服(停車折抵)",
-    "restroom": "廁所",
-    "nursing_room": "哺乳室",
-    "food_court": "美食街",
-    "supermarket": "超市",
-    "din_tai_fung": "鼎泰豐",
-    "all_brands": "全館品牌"
+    "items_and_luggage_storage": "アイテムと荷物の保管",
+    "metro_station": "MRT",
+    "taxi_station": "タクシー乗り場",
+    "101f_queue": "101F 並ぶ場所",
+    "91f_outdoor_area": "91 階屋外展望台",
+    "ice_warmed_water_dispenser": "氷冷温水ディスペンサー",
+    "snackable_souvenirs": "お土産",
+    "high_rise_restaurant_reception": "超高層レストラン",
+    "accessible_facilities": "バリアフリートイレ",
+    "tax_refund_currency_exchange": "免税/外貨両替カウンター",
+    "service_counter": "カスタマサービスセンター",
+    "service_counter_parking_discount": "カスタマサービスセンター(駐車場代割引)",
+    "restroom": "トイレ",
+    "nursing_room": "授乳（収集）ミルクルーム",
+    "food_court": "フードコート",
+    "supermarket": "マーケット",
+    "din_tai_fung": "鼎泰豐・ディンタイフォン",
+    "all_brands": "ショッピングモール"
   },
   "external": {
     "all": "全部",

src/language/ko.json

@@ -34,7 +34,7 @@
   "close": "닫기",
   "recording": "녹음 중",
   "second": "초",
-  "stop_recording": "대화가 끝나면 정지 버튼을 눌러 녹음을 종료하세요",
+  "stop_recording": "대화가 끝나면 정지 버튼을 눌러 녹음을 종료하세요<br>（시간은 60초를 초과하지 않도록 해주세요）",
   "speech_error": "음성 인식 오류가 발생했습니다. 다시 녹음해주세요.",
   "return_to_ai_support": "AI 고객 지원으로 돌아가기",
   "search_brand": "브랜드 검색",

src/language/zh.json

@@ -34,7 +34,7 @@
   "close": "關閉",
   "recording": "錄音中",
   "second": "秒",
-  "stop_recording": "對話完畢後，請按下停止按鈕結束錄音",
+  "stop_recording": "對話完畢後，請按下停止按鈕結束錄音<br>（秒數最長不超過 60 秒）",
   "speech_error": "語音辨識有誤，請重新錄製。",
   "return_to_ai_support": "返回 AI 客服",
   "search_brand": "搜尋品牌",