PageSourceSearch

https://www.jcthplus.org/

html jcthplus.org collected 2026-09-26 05:05:04 UTC 105,612 bytes, 1,219 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh" >
3<head>
4  <link rel="alternate" hreflang="zh" href="https://www.jcthplus.org/" />
5  <link rel="alternate" hreflang="en" href="https://en.jcthplus.org/" />
6  <link rel="alternate" hreflang="x-default" href="https://www.jcthplus.org/" />
7  <meta charset="UTF-8">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge">
9   
10    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
11    <meta name="appleid-signin-client-id" content="com.labviso.jcthweb">
12  <meta name="appleid-signin-scope" content="name email">
13  <meta name="appleid-signin-redirect-uri" content="https://www.jcthplus.org">
14  <meta name="appleid-signin-state" content="thisisastate">
15  <meta name="appleid-signin-nonce" content="[NONCE]">
16  <meta name="appleid-signin-use-popup" content="true"> <!-- or false defaults to false -->
17      <meta name="smartbanner:title" content="TourHeart+">
18    <meta name="smartbanner:author" content="鍛煉心理肌肉">
19    <meta name="smartbanner:price" content="紓解壓力、抑鬱、焦慮">
20    <meta name="smartbanner:price-suffix-apple" content="">
21    <meta name="smartbanner:price-suffix-google" content="">
22    <meta name="smartbanner:icon-apple" content="/wp-content/uploads/2022/05/app-icon.png">
23    <meta name="smartbanner:icon-google" content="/wp-content/uploads/2022/05/app-icon.png">
24    <meta name="smartbanner:button" content="下載">
25    <meta name="smartbanner:button-url-apple" content="https://apps.apple.com/hk/app/%E8%B3%BD%E9%A6%AC%E6%9C%83%E5%BF%83%E5%B0%8E%E9%81%8A-%E8%A8%88%E5%8A%83/id1619066368">
26    <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.labviso.jcthplus">
27    <meta name="smartbanner:enabled-platforms" content="android,ios">
28    <meta name="smartbanner:close-label" content=關閉>
29    <meta name="smartbanner:custom-design-modifier" content="ios">
30          
30<script type="2ed2de0e287741bf6526c024-text/javascript">
vendor: 508 bytes, lines 30-43
30
31        (function(w, d, s, l, i) {
32          w[l] = w[l] || [];
33          w[l].push({
34            'gtm.start': new Date().getTime(),
35            event: 'gtm.js'
36          });
37          var f = d.getElementsByTagName(s)[0],
38            j = d.createElement(s),
39            dl = l != 'dataLayer' ? '&l=' + l : '';
40          j.async = true;
41          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
42          f.parentNode.insertBefore(j, f);
43        })(window, document, 'script', 'dataLayer', '
43GTM-MPDL2WB
vendor: 12 bytes, lines 43-44
43');
44        
44window.dataLayer = window.dataLayer || [];
45
46        function gtag() {
47          dataLayer.push(arguments);
48        }
49      </script>
49
50        
50<script type="2ed2de0e287741bf6526c024-text/javascript">
51      function gaEvent(path, event, params) {
52        if (typeof(gtag) == "function") {
53          gtag('set', 'page_path', path);
54          if (params != null && typeof params === "object" && !Array.isArray(params)) {
55            gtag('event', event, params);
56          } else {
57            gtag('event', event);
58          }
59        }
60      }
61    </script>
61
62        
62<script type="2ed2de0e287741bf6526c024-text/javascript">
63      (function(c, l, a, r, i, t, y) {
64        c[a] = c[a] || function() {
65          (c[a].q = c[a].q || []).push(arguments)
66        };
67        t = l.createElement(r);
68        t.async = 1;
69        t.src = "https://www.clarity.ms/tag/" + i;
70        y = l.getElementsByTagName(r)[0];
71        y.parentNode.insertBefore(t, y);
72      })(window, document, "clarity", "script", "ritqzsfq98");
73    </script>
73
74    
74<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" type="2ed2de0e287741bf6526c024-text/javascript"></script>
74
75  
75<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
75
76  
76<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
76
77  
77<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
77
78  
78<script src="https://apis.google.com/js/api:client.js" defer type="2ed2de0e287741bf6526c024-text/javascript"></script>
78
79  <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/fontawesome.css" rel="stylesheet" />
80  <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/brands.css" rel="stylesheet" />
81  <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/solid.css" rel="stylesheet" />
82  <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/regular.css" rel="stylesheet" />
83  <link rel="preconnect" href="https://fonts.googleapis.com">
84  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
85  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;600;700&family=Solway:wght@300;400;500;600;700" rel="stylesheet">
86  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,FILL@24,0..1&display=block&icon_names=3p,account_tree,add_2,add_comment,arrow_back_ios_new,arrow_forward,arrow_forward_ios,attach_money,award_star,badge,bar_chart,bed,block,bookmark,bookmark_add,bookmark_added,border_color,calendar_add_on,calendar_clock,calendar_month,calendar_today,call,cancel,check,circle,close,contact_phone,content_copy,delete,dictionary,download,draw,edit,event_seat,group,heart_check,heart_plus,help,hotel,hourglass,ink_highlighter_move,key,list_alt_check,local_activity,location_on,lock,lock_open_right,mail,menu,menu_book,more_horiz,pause_circle,play_circle,radio_button_checked,radio_button_unchecked,remove,schedule,search,send,snooze,speed,task_alt,thumb_down,thumb_up,visibility,volume_down,volume_mute,volume_off,volume_up" rel="stylesheet">
87
88  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
89  
89<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
89
90  <link rel="canonical" href="https://www.jcthplus.org/">
vendor: 138 bytes, lines 90-92
90
91  <script src="https://www.google.com/recaptcha/api.js?hl=zh-HK" async defer type="2ed2de0e287741bf6526c024-text/javascript"></script>
92  
92<script src="https://accounts.google.com/gsi/client" async defer type="2ed2de0e287741bf6526c024-text/javascript"></script>
92
93  <meta name="description" content=""> 
94  <meta name="keyword" content=""> 
95      <title>賽馬會心導遊+計劃</title>
96  <meta name='robots' content='max-image-preview:large' />
97<link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
98<link rel='dns-prefetch' href='//cdn.datatables.net' />
99<style id="wp-img-auto-sizes-contain-inline-css">
100img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
101/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
102</style>
103<style id="wp-emoji-styles-inline-css">
104
105	img.wp-smiley, img.emoji {
106		display: inline !important;
107		border: none !important;
108		box-shadow: none !important;
109		height: 1em !important;
110		width: 1em !important;
111		margin: 0 0.07em !important;
112		vertical-align: -0.1em !important;
113		background: none !important;
114		padding: 0 !important;
115	}
116/*# sourceURL=wp-emoji-styles-inline-css */
117</style>
118<style id="wp-block-library-inline-css">
119:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;
119--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
120
121/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
122</style>
123<style id="classic-theme-styles-inline-css">
124/*! This file is auto-generated */
125.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
126/*# sourceURL=/wp-includes/css/classic-themes.min.css */
127</style>
128
129
130<link rel='stylesheet' id='dataTables-css' href='https://cdn.datatables.net/v/bs5/moment-2.29.4/dt-2.3.5/datatables.min.css?ver=2.3.5' media='all' />
131<link rel='stylesheet' id='tourheart-survey/cms/css/styles-css' href='https://www.jcthplus.org/wp-content/plugins/tourheart-survey/cms/css/styles.css?ver=1.0.0' media='all' />
132<link rel='stylesheet' id='username-changer-css' href='https://www.jcthplus.org/wp-content/plugins/username-changer/assets/css/frontend.css?ver=3.3.0' media='all' />
133<link rel='stylesheet' id='new_main.css-css' href='https://www.jcthplus.org/wp-content/themes/1.0/tailwindcss4/new-main-style.css?ver=1790225334' media='all' />
134<script id="chart-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js?ver=4.3.0" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 134
134
135<script id="dataTables-js" src="https://cdn.datatables.net/v/bs5/moment-2.29.4/dt-2.3.5/datatables.min.js?ver=2.3.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 135
135
136<script id="dataTables-absolute-js" src="https://cdn.datatables.net/plug-ins/2.3.5/sorting/absolute.js?ver=2.3.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 136
136
137<script id="jquery-core-js" src="https://www.jcthplus.org/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 137
137
138<script id="jquery-migrate-js" src="https://www.jcthplus.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 138
138
139<script data-wp-strategy="defer" defer id="main-js" src="https://www.jcthplus.org/wp-content/themes/1.0/js/main.js?ver=1757041995" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 139
139
140<script id="js-cookie-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js?ver=1.0.0" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 140
140
141<script id="t2cn-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/t2cn.js?ver=1.0.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 141
141
142<script id="react-home-page-js-extra" type="2ed2de0e287741bf6526c024-text/javascript">
143var phpData = {"lang":"zh","user_id":null,"email":null,"name":null,"site_url":"https://www.jcthplus.org"};
144//# sourceURL=react-home-page-js-extra
145</script>
vendor: 1 bytes, line 145
145
146<script type="2ed2de0e287741bf6526c024-module" src="https://www.jcthplus.org/wp-content/themes/1.0/dist/react/homePage.js?ver=1790225334" id="react-home-page-js"></script>
146<link rel="https://api.w.org/" href="https://www.jcthplus.org/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.jcthplus.org/xmlrpc.php?rsd" />
147<meta name="generator" content="WordPress 7.1" />
148<link rel="icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-32x32.png" sizes="32x32" />
149<link rel="icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-192x192.png" sizes="192x192" />
150<link rel="apple-touch-icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-180x180.png" />
151<meta name="msapplication-TileImage" content="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-270x270.png" />
152
153    
153<script type="2ed2de0e287741bf6526c024-text/javascript">var _jf = _jf || [];_jf.push(['p','65383']);_jf.push(['initAction',true]);_jf.push(['_setFont','jf-jinxuanlatte-regular','css','.jf-jinxuanlatte-regular']);_jf.push(['_setFont','jf-jinxuanlatte-regular','alias','jf-jinxuanlatte']);_jf.push(['_setFont','jf-jinxuanlatte-regular','weight',400]);(function(A,p,c,m,l,q,r,h,B,D){var b=A._jf;if(b.constructor!==Object){var t=!0,u=function(a){var f=!0,e;for(e in b)b[e][0]==a&&(f&&(f=f&&!1!==b[e][1].call(b)),b[e]=null,delete b[e])},v=/\S+/g,w=/[\t\r\n\f]/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,n="".trim,x=n&&!n.call("\ufeff\u00a0")?function(a){return null==a?"":n.call(a)}:function(a){return null==a?"":(a+"").replace(C,"")},k=function(a){var f,b,g;if("string"===typeof a&&a&&(a=(a||"").match(v)||[],f=h[c]?(" "+h[c]+" ").replace(w," "):" ")){for(g=0;b=a[g++];)0>f.indexOf(" "+b+" ")&&(f+=b+" ");h[c]=x(f)}},d=function(a){var b,e,g;if(0===arguments.length||"string"===typeof a&&a){var d=(a||"").match(v)||[];if(b=h[c]?(" "+h[c]+" ").replace(w," "):""){for(g=0;e=d[g++];)for(;0<=b.indexOf(" "+e+" ");)b=b.replace(" "+e+" "," ");h[c]=a?x(b):""}}},y;b.addScript=y=function(b,f,e,g,d,c){d=d||function(){};c=c||function(){};var a=p.createElement("script"),h=p.getElementsByTagName("script")[0],k,m=!1,l=function(){a.src="";a.parentNode.removeChild(a);a=a.onerror=a.onload=a.onreadystatechange=null};g&&(k=setTimeout(function(){l();c()},g));a.type=f||"text/javascript";a.async=e;a.onload=a.onreadystatechange=function(b,c){m||a.readyState&&!/loaded|complete/.test(a.readyState)||(m=!0,g&&clearTimeout(k),l(),c||d())};a.onerror=function(a,b,d){g&&clearTimeout(k);l();c();return!0};a.src=b;h.parentNode.insertBefore(a,h)};for(var z in b)"initAction"==b[z][0]&&(t=b[z][1]);b.push(["_eventPreload",function(){1==t&&k(m);y(B,null,!1,3E3,null,function(){u("_eventInactived")})}]);b.push(["_eventReload",function(){d(r);d(q);k(l)}]);b.push(["_eventActived",function(){d(m);d(l);k(q)}]);b.push(["_eventInactived",function(){d(m);d(l);k(r)}]);u("_eventPreload")}})(this,this.document,"className","jf-loading","jf-reloading","jf-active","jf-inactive",this.document.getElementsByTagName("html")[0],"//ds.justfont.com/js/stable/v/6.1/id/441052665833");</script>
153
154  </head>
155
156<body class="flex flex-col font-NotoSansTC tracking-zh no-scrollbar min-h-screen" :class="scrollDisabled ? 'overflow-hidden' : ''" x-data="{scrollDisabled:false}" @disable-scroll.window="scrollDisabled=$event.detail" >
157        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPDL2WB" height="0" width="0" style="display:none; visibility:hidden"></noscript>
158        
158<script type="2ed2de0e287741bf6526c024-text/javascript">
159      function gaEvent(path, event, params) {
160        if (typeof(gtag) == "function") {
161          gtag('set', 'page_path', path);
162          if (params != null && typeof params === "object" && !Array.isArray(params)) {
163            gtag('event', event, params);
164          } else {
165            gtag('event', event);
166          }
167        }
168      }
169    </script>
169
170  <nav id="navigation" class="bg-white inset-x-0 z-30 shrink-0 collapsing" x-data="navInit">
171  <div class="relative mx-4 new_sm:mx-10 new_lg:mx-8 z-10 h-24 flex flex-row items-center justify-between">
172    <button type="button" id="btn-open-mobile-menu" class="w-6 h-6 z-10 flex items-center justify-center new_lg:hidden mr-8" aria-controls="mobile-menu" aria-expanded="false" @click="toggleMobileMenu">
173      <span class="material-symbols-rounded text-new-secondary_brown_800 hover:text-new-primary_green_400 text-[32px]" x-text="isMobileMenuVisible ? 'close' : 'menu'"></span>
174    </button>
175
176    <div class="absolute inset-0 new_sm:relative flex new_sm:grow new_lg:grow-0 items-center sm:items-center justify-center new_sm:justify-start">
177      <div class="shrink-0 flex items-center justify-center my-4">
178                  <a id="nav-logo-full" href="/">
179            <img class="w-auto h-12" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/logo/JCTH-icon.png" alt="TourHeart+ icon large">
180          </a>
181          <a id="nav-logo" href="/" class="hidden">
182            <img class="w-auto h-[42px]" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/logo/JCTH-icon.png" alt="TourHeart+ icon small">
183          </a>
184              </div>
185    </div>
186
187    <div class="hidden new_lg:flex grow flex-row items-stretch space-x-6 ml-6 h-full">
188      <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown">
189        <div class="h-full flex items-stretch">
190          <a href="/about-us" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center"><span>關於我們</span><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></a>
191          <div class="hover-indicator"></div> 
192        </div>
193
194        <div x-show="open" class="sub-menu" x-collapse x-cloak>
195          <a href="/about-us#jcthplus-team" class="sub-menu-item">關於平台服務</a>
196          <a href="/about-us#what-we-provide" class="sub-menu-item">平台內容</a>
197          <a href="/about-us#who-we-are" class="sub-menu-item">認識我們</a>
198          <a href="/our-research" class="sub-menu-item">我們的研究</a>
199        </div>
200      </div>
201
202      <div class="relative menu-item">
203        <div class="h-full flex items-stretch">
204          <a href="/ai-mental-health-chatbot" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">與阿本聊天</a>
205          <div class="hover-indicator"></div>
206        </div>
207      </div>
208
209      <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown">
210        <div class="h-full flex items-stretch">
211          <button class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center" @click="open = !open"><p class="text-left">自學資源</p><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button>
212          <div class="hover-indicator"></div>
213        </div>
214
215        <div x-show="open" class="sub-menu" x-collapse x-cloak>
216          <a href="/courses" class="sub-menu-item">課堂</a>
217          <a href="/exercises" class="sub-menu-item">練習</a>
218          <a href="/articles" class="sub-menu-item">文章</a>
219        </div>
220      </div>
221
222      <div class="relative menu-item">
223        <div class="h-full flex items-stretch">
224          <a href="/events" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">活動</a>
225          <div class="hover-indicator"></div>
226        </div>
227      </div>
228
229      <div class="relative menu-item">
230        <div class="h-full flex items-stretch">
231          <a href="https://antistigma.psy.cuhk.edu.hk/" target="_blank" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">去污名之旅</a>
232          <div class="hover-indicator"></div>
233        </div>
234      </div>
235
236      <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown">
237        <div class="h-full flex items-stretch">
238          <a href="/for-student" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center"><p class="text-left">大專生專區</p><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></a>
239          <div class="hover-indicator"></div>
240        </div>
241
242        <div x-show="open" class="sub-menu" x-collapse x-cloak>
243                      <a href="https://www.cityu.edu.hk/sds/cs/tourheart/" class="sub-menu
243-item" target="_blank">香港城市大學</a>
244                      <a href="/cuhk/" class="sub-menu-item" target="_blank">香港中文大學學生事務處心理健康及輔導中心</a>
245                      <a href="https://sao.polyu.edu.hk/TourHeart/index_zh.asp" class="sub-menu-item" target="_blank">香港理工大學</a>
246                      <a href="https://counsel.hkust.edu.hk/tourheart/" class="sub-menu-item" target="_blank">香港科技大學</a>
247                      <a href="https://sso.cedars.hku.hk/tourHeart/" class="sub-menu-item" target="_blank">香港大學學生發展及資源中心</a>
248                      <a href="https://tourheart.hkuspace.hku.hk/hkuspace-cc/zh" class="sub-menu-item" target="_blank">香港大學附屬學院</a>
249                      <a href="https://tourheart.hkuspace.hku.hk/hkuspace-ic/zh" class="sub-menu-item" target="_blank">香港大學專業進修學院國際學院</a>
250                      <a href="https://tourheart.hkuspace.hku.hk/hpshcc/zh" class="sub-menu-item" target="_blank">香港大學專業進修學院保良局何鴻燊社區書院</a>
251                      <a href="/hkbu-smc-sdc/" class="sub-menu-item" target="_blank">香港浸會大學石門校園學生發展中心</a>
252                      <a href="/twc/" class="sub-menu-item" target="_blank">東華學院</a>
253                  </div>
254      </div>
255    </div>
256
257    <div class="flex flex-row items-center z-10">
258      <div class="flex flex-row items-center space-x-4">
259
260        <div class="hidden new_sm:flex flex-row items-center">
261          <a class="switch-cn-url text-new-primary_green_900 hover:text-new-primary_green_400 body_1">简</a>
262          <p class="w-6 body_1 text-center text-new-grey_300"> | </p>
263          <a class="switch-en-url hover:text-new-primary_green_400 text-new-primary_green_900 body_1">EN</a>
264        </div>
265
266                  <a href="/login" class="auth-url hidden new_sm:block body_1 text-new-primary_green_900 hover:text-new-primary_green_400" aria-expanded="false" aria-haspopup="true">登入</a>
267          <a href="/register" class="auth-url h-10 px-6 body_1 font-semibold text-white bg-new-primary_orange_900 rounded-full flex items-center justify-center hover:bg-new-primary_orange_900_hover" aria-expanded="false" aria-haspopup="true">註冊<span class="hidden new_sm:inline-block w-6 material-symbols-rounded text-white text-2xl ml-2">arrow_forward</span></a>
268              </div>
269    </div>
270  </div>
271
272  <div class="fixed left-0 top-20 bottom-0 w-screen bg-background-yellow new_lg:hidden border-t border-new-secondary_brown_300 px-4 pt-6 pb-56 overflow-y-auto" id="mobile-menu" x-cloak x-show="isMobileMenuVisible" x-collapse x-data="{opened: null}">
273  <div class="flex flex-row items-center pb-4 mb-6 new_sm:hidden">
274    <a class="switch-cn-url text-new-primary_green_900 hover:text-new-primary_green_400 body_1">简</a>
275    <p class="w-6 body_1 text-center text-new-grey_300"> | </p>
276    <a class="switch-en-url hover:text-new-primary_green_400 text-new-primary_green_900 body_1">EN</a>
277  </div>
278
279  <div class="mb-6">
280    <div class="flex flex-row items-center">
281      <button class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center" @click="opened = opened === 1 ? null : 1">關於我們<span class="w-5 h-5 shrink-0 flex items-center justify-center material-symbols-rounded text-lg sm:text-xl leading-none origin-center ml-3" :class="opened === 1 ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button>
282    </div>
283
284    <div x-show="opened === 1" class="pl-4 flex flex-col space-y-4 pt-4" x-collapse x-cloak>
285      <a href="/about-us" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">關於「心導遊+」</a>
286      <a href="/about-us#jcthplus-team" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >關於平台服務</a>
287      <a href="/about-us#what-we-provide" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >平台內容</a>
288      <a href="/about-us#who-we-are" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >認識我們</a>
289      <a href="/our-research" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">我們的研究</a>
290    </div>
291  </div>
292
293  <a href="/ai-mental-health-chatbot" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">與阿本聊天</a>
294
295  <div class="mb-6">
296    <div class="flex flex-row items-center">
297      <button class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center" @click="opened = opened === 3 ? null : 3">自學資源<span class="w-5 h-5 shrink-0 flex items-center justify-center material-symbols-rounded text-lg sm:text-xl leading-none origin-center ml-3" :class="opened === 3 ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button>
298    </div>
299
300    <div x-show="opened === 3" class="pl-4 flex flex-col space-y-4 pt-4" x-collapse x-cloak>
301      <a href="/courses" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">課堂</a>
302      <a href="/exercises" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">練習</a>
303      <a href="/articles" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">文章</a>
304    </div>
305  </div>
306
307  <a href="/events" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">活動</a>
308
309  <a href="https://antistigma.psy.cuhk.edu.hk/" target="_blank" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">去污名之旅</a>
310
311  <a href="/for-student" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center">大專生專區</a>
312</div>
313</nav>
314
315<script type="2ed2de0e287741bf6526c024-text/javascript">
316      $("#mobile-menu").css("top", "96px");
317
318    window.onscroll = function() {
319      let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
320      if (scrollTop >= 96) {
321        $("nav").addClass("sticky-nav");
322        $("nav").css("top", Math.min(scrollTop - 192 , -16) + "px");
323
324        $("#mobile-menu").css("top", Math.min(scrollTop - 96, 80) + "px");
325      } else {
326        $("nav").removeClass("sticky-nav");
327        $("nav").css("top", 0);
328
329        $("#mobile-menu").css("top", (96 - scrollTop) + "px");
330      }
331    };
332  
333  document.addEventListener('alpine:init', () => {
334    Alpine.data('menuData', () => ({
335      open: false,
336      openDropdown() {
337        this.open = true;
338      },
339      closeDropdown() {
340        this.open = false;
341      }
342    }))
343  });
344
345  $(".menu-item a").on("focus", function() {
346    const id = $(this).closest(".menu-item").attr("id");
347
348    const showEvent = new Event(`show-mega-${id}`);
349    window.dispatchEvent(showEvent);
350  });
351
352  $(".menu-item a").on("blur", function() {
353    setTimeout(() => {
354      if ($(".menu-item a:focus").length == 0) {
355        const hideEvent = new Event("hide-all-mega");
356        window.dispatchEvent(hideEvent);
357      }
358    }, 100);
359  });
360
361</script>
361
362
363
364  
364<script type="2ed2de0e287741bf6526c024-text/javascript">
365  document.fonts.load('1em "Material Symbols Rounded"').then(() => {
366    document.body.classList.add('material-symbols-loaded');
367  });
368
369  const lang = "zh_CHT";
370  
371  document.addEventListener('alpine:init', () => {
372    Alpine.data('navInit', () => ({
373      userLoggedIn: false,
374      isProfileMenuVisible: false,
375      isProfileMobileMenuVisible: false,
376      isMobileMenuVisible: false,
377      isMobileUniversityMegaVisible: false,
378      toggleMobileMenu() { 
379        this.isProfileMenuVisible = false;
380        this.isProfileMobileMenuVisible = false;
381        this.isMobileMenuVisible = !this.isMobileMenuVisible; 
382
383        if (this.isMobileMenuVisible) {
384          $("body").css("overflow", "hidden");
385        } else {
386          $("body").css("overflow", "auto");
387        }
388      },
389      toggleProfileMobileMenu() {
390        this.isMobileMenuVisible = false;
391        this.isProfileMobileMenuVisible = !this.isProfileMobileMenuVisible;
392      },
393      showProfileMenu() { 
394        this.isMobileMenuVisible = false; 
395        this.isProfileMenuVisible = true; 
396      },
397      hideProfileMenu() { 
398        this.isProfileMenuVisible = false 
399      },
400      toggleMobileUniversityMega() {
401        this.isMobileUniversityMegaVisible = !this.isMobileUniversityMegaVisible;
402      }
403    }));
404  })
405  </script>
405
406
407<div id="react-page-root">
408  <div class="flex items-center justify-center w-full grow py-20">
409    <svg
410      class="animate-spin h-10 w-10 text-primary-green-600 mx-auto"
411      viewBox="0 0 24 24"
412      >
413      <circle
414        class="opacity-25"
415        cx="12"
416        cy="12"
417        r="10"
418        stroke="currentColor"
419        fill="transparent"
420        stroke-width="4"
421        ></circle>
422      <path
423        class="opacity-75"
424        fill="currentColor"
425        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
426        ></path>
427    </svg>
428  </div>
429</div>
430
431<script type="2ed2de0e287741bf6526c024-text/javascript">
432  const setScrollbarWidthVariable = () => {
433  const outer = document.createElement('div');
434  outer.style.visibility = 'hidden';
435  outer.style.overflow = 'scroll';
436  outer.style.width = '100px';
437  outer.style.height = '100px';
438  
439  document.body.appendChild(outer);
440
441  const scrollbarWidth = outer.offsetWidth - outer.clientWidth;
442
443  document.body.removeChild(outer);
444
445  document.documentElement.style.setProperty(
446    '--scrollbar-width', 
447    `${scrollbarWidth}px`
448  );
449}
450
451setScrollbarWidthVariable();
452</script>
452
453
454
455<div x-data="chatbotData">
456  <button class="fixed flex bottom-24 lg:bottom-8 right-8 rounded-full h-14 w-14 z-30 bg-primary-dark items-center justify-center shadow" @click.stop="openChatbotPanel()" x-cloak x-show="isEntranceVisible">
457    <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot_profile_new.png" alt="Chat with Boon widget" class="w-12 h-12">
458  </button>
459
460  <div class="fixed inset-0 h-screen w-screen bg-gray-500/50 flex items-center justify-center z-100" x-cloak x-show="isChatbotPanelVisible" @start-chatbot.window="openChatbotPanel($event.detail.chatbot_id)">
461    <div id="chatbot-panel" class="fixed inset-y-0 right-0 shadow-lg border-gray-500 w-full sm:w-144 z-50 bg-white flex flex-col items-stretch" @click.stop="">
462      <div class="relative w-full h-full flex flex-col" x-show="isMessageSectionVisible">
463        <div class="bg-primary h-18 flex items-center px-5 flex-shrink-0 z-30">
464          <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot_profile_new.png" class="h-14 w-14 mr-4" alt="Poon profile pic">
465          <span class="text-white font-bold">阿本</span>
466          <div class="flex-grow"></div>
467           
468            <button class="bg-white text-primary-darker rounded-full font-sm font-medium px-4 py-2 float-right cursor-pointer hover:bg-primary-lightest leading-normal" @click.stop="isTopicPanelVisible = true" tabIndex="1">話題</button>
469                    <!-- <i class="fa-solid fa-magnifying-glass text-white text-xl pl-4 cursor-pointer"></i> -->
470          
471          <button class="ml-4" tabIndex="1" @click.stop="checkNeedRating($dispatch)">
472            <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-white.svg" alt="close" >
473          </button>
474        </div>
475
476        <div id="chat-messages" class="relative flex-grow overflow-y-scroll z-20" @scroll.self="handleScroll" x-ref="messages">
477          <div class="fixed w-full sm:w-144 py-2 bg-module-box text-center text-sm transition-all duration-300 z-20" :class="isFavoritedMessageVisible ? 'top-18' : 'top-9'">已加到「收藏庫」</div>
478          <div class="w-full mt-3 flex items-center justify-center" x-show="isLoadingHistory">
479            <div id="chatbot-loader"></div>
480          </div>
481          <div class="flex flex-col items-stretch justify-end px-5 pb-3 min-h-full" tabIndex="1">
482            <template x-for="message in messageList" :key="message.message_id">
483              <div class="mt-3 clear-both">
484                <template x-if="message.from=='chatbot' && message.content_type!='report'">
485                  <div class="items-center space-x-3 inline-flex bubble-container w-full">
486                    <div class="inline-block rounded-2xl rounded-tl-none text-sm text-content max-w-chatbot-bubble md:max-w-sm overflow-hidden" :class="[message.content_type=='image-url' || 'py-2.5 px-4', (message.chat_id == chatId) ? 'bg-primary-light' : 'bg-gray-100']">
487                      <div x-show="message.content_type=='text'" x-html="message.content_data"></div>
488                      <div x-show="message.content_type=='image-url'" class="p-0"><image :src="(message.content_type=='image-url') ? message.content_data : ''"></div>
489                      <div x-show="message.content_type=='audio-url'">
490                        <audio class="" controls :src="(message.content_type=='audio-url') ? message.content_data : ''" tabIndex="1"></audio>
491                      </div>
492                      <div x-show="message.content_type=='video-url'" class="chatbot-video-bubble">
493                        <div class="w-full aspect-w-16 aspect-h-16 md:aspect-h-9">
494                          <!-- <video controls ><soruce src="message.content_data">Your browser does not support the audio tag.</audio> -->
495                          <iframe loading="lazy" :src="(message.content_type=='video-url') ? `${message.content_data}?modestbranding=1&rel=0` : ''" class="absolute inset-0 h-full video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
496                        </div>
497                      </div>
498                    </div>
499                                        <!-- <i class="fa-regular fa-copy bubble-action" x-show="message.content_type=='text'" @click="copyMessage(message.content_data)"></i>
499 -->
500                  </div>
501                </template>
502                <template x-if="message.from=='chatbot' && message.content_type=='report'">
503                  <button class="inline-flex border rounded-full px-4 py-2 max-w-sm text-content border-gray-500 text-sm hover:border-primary hover:bg-primary hover:text-white items-center" @click="openReportPanel(message.content_data.report_id, message.content_data.report_time)">
504                    <span x-text="message.content_data.report_title"></span><i class="fa-solid fa-angle-right ml-2"></i>
505                  </button>
506                </template>
507                <template x-if="message.from=='user'">
508                  <div class="inline-block float-right rounded-2xl rounded-tr-none text-sm py-2.5 px-4 text-content max-w-sm" :class="message.chat_id == chatId ? 'bg-chatbot-user' : 'bg-gray-100'" x-html="message.content_data"></div>
509                </template>
510              </div>
511            </template>
512
513            <div class="inputing" x-show="isInputingVisible"><span></span><span></span><span></span></div>
514          </div>
515        </div>
516
517        <div class="flex-shrink-0 w-full bottom-0 px-5 bg-gray-200 text-sm pb-4 sm:pb-0">
518          <template x-if="expectedUserResponse?.reply_type=='text'">
519            <div class="w-full flex flex-row items-stretch space-x-4 py-2">
520              <div class="rounded-3xl bg-white border-none px-6 py-2 focus:outline-none" placeholder="write a message" id="chatbot-input-text" contenteditable="true" tabindex="-1" @input="userMessage = $event.target.textContent"></div>
521              <div class="flex items-end">
522                <button @click="sendUserMessage()" :disabled="!userMessage"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button>
523              </div>
524            </div>
525          </template>
526
527          <template x-if="expectedUserResponse?.reply_type=='options'">
528            <div class="w-full flex flex-row items-end space-x-4 py-2">
529              <div class="chatbot-input-wrap rounded-2xl bg-white px-4">
530                <template x-for="option in expectedUserResponse?.reply_content">
531                  <div class="flex flex-row items-center my-2 cursor-pointer" @click="userMessage = option" tabIndex="1" @keyup="selectOption(event, option)" :aria-label="`option - ${option}`">
532                    <div class="circle border rounded-full w-4 h-4 flex items-center justify-center" :class="(userMessage==null || userMessage==option) ? ('border-primary') : 'border-primary-lightest'">
533                      <div x-show="userMessage==option" class="bg-primary rounded-full w-2 h-2"></div>
534                    </div>
535                    <div class="flex-grow pl-2" :class="(userMessage && userMessage != option) ? 'text-gray-300' : 'text-content'" x-html="option"></div>
536                  </div>
537                </template>
538              </div>
539              <button @click="sendUserMessage()" :disabled="!userMessage" tabIndex="1"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></i></button>
540            </div>
541          </template>
542
543          <template x-if="expectedUserResponse?.reply_type=='scale'">
544            <div class="w-full flex flex-row items-stretch space-x-4 py-2">
545              <div class="chatbot-input-wrap rounded-2xl bg-white p-4 pt-2 space-y-4 flex flex-col items-stretch justify-center">
546                <div class="flex items-end justify-between">
547                  <span x-text="expectedUserResponse?.reply_setting.scale_setting.min.label[currentLang]"></span>
548                  <span class="text-primary-dark font-medium text-sm font-jinxuanlatte inline-block h-6" x-text="userMessage"></span>
549                  <span x-text="expectedUserResponse?.reply_setting.scale_setting.max.label[currentLang]"></span>
550                </div>
551                <input type="range" class="w-full" id="chatbot-slider" :min="expectedUserResponse?.reply_setting.scale_setting.min.value" :max="expectedUserResponse?.reply_setting.scale_setting.max.value" :step="expectedUserResponse?.reply_setting.scale_setting.step" x-model="userMessage">
552              </div>
553
554              <div class="flex items-end">
555                <button @click="sendUserMessage()" :disabled="!userMessage"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button>
556              </div>
557            </div>
558          </template>
559
560          <template x-if="expectedUserResponse?.reply_type=='multiple-options'">
561            <div class="w-full flex flex-row items-end space-x-4 py-2">
562              <div class="chatbot-input-wrap rounded-2xl bg-white px-4">
563                <template x-for="(option, index) in expectedUserResponse?.reply_content">
564                  <div class="flex flex-row items-center my-2 cursor-pointer" @click="userMessage = option">
565                    <input type="checkbox" class="text-primary outline-none" x-model="userSelection[index]" :id="`multiple_option_${index}`">
566                    <label class="flex-grow pl-2 text-content" x-html="option" :for="`multiple_option_${index}`"></label>
567                  </div>
568                </template>
569              </div>
570              <button @click="sendUserMessageMultipleOptions" :disabled="!userSelection.includes(true)"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userSelection.includes(true)) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button>
571            </div>
572          </template>
573
574          <template x-if="!expectedUserResponse">
575            <div class="w-full flex flex-row items-center justify-end py-2">
576              <button disabled><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send-disabled.svg`" alt="send" class="w-8 h-8 my-0.5"></button>
577            </div>
578          </template>
579
580        </div>
581      </div>
582
583      <div class="absolute w-full h-full right-0 inset-y-0 flex flex-col z-30" x-show="isReportSectionVisible" x-transition:enter="transition ease-out duration-300" 
584        x-transition:enter-start="opacity-0 scale-90"
585        x-transition:enter-end="opacity-100 scale-100"
586        x-transition:leave="transition ease-in duration-300"
587        x-transition:leave-start="opacity-100 scale-100"
588        x-transition:leave-end="opacity-0 scale-90">
589        <div class="bg-primary h-18 flex items-center px-5 flex-shrink-0">
590          <span class="text-white cursor-pointer" @click="closeReportPanel">
591            <i class="fa-solid fa-chevron-left mr-2"></i>繼續傾
592          </span>
593          <div class="flex-grow"></div>
594          <!-- <span class="bg-primary-lightest text-primary-darker rounded-full font-sm font-medium px-4 py-2 float-right shadow cursor-pointer" @click.stop="isTopicPanelVisible = true">話題</span> -->
595          <!-- <i class="fa-solid fa-magnifying-glass text-white text-xl pl-4 cursor-pointer"></i> -->
596        </div>
597
598        <div class="bg-white flex-grow overflow-y-scroll px-5 flex flex-col items-stretch">
599          <h5 class="text-primary-dark mt-5 mb-1" x-text="reportDetail?.report_title[currentLang]"></h5>
600          <p class="text-primary py-2"><i class="fa-solid fa-circle-check mr-2"></i>已加到「我的練習」讓你隨時新增或翻閱紀錄</p>
601          <div class="flex items-end justify-between mb-2">
602            <span class="text-gray-400 text-xs" x-text="getDateTime(reportDetail?.timestamp)"></span>
603            <button class="text-primary disabled:opacity-0 disabled:cursor-default" :disabled="isReportEditable" @click="isReportEditable = true">修改</button>
604          </div>
605
606          <template x-for="(question, index) in reportDetail?.report_content" :key="index">
607            <div class="rounded-xl w-full mb-3 bg-primary-lightest flex flex-col p-4" x-data="{enableEditor: false}">
608              <div class="text-primary-darker font-bold flex-grow" x-text="`${index + 1}. ${question.question[currentLang]}`"></div>
609              <hr class="my-2 border-primary-dark">
610              <div class="text-content text-sm" x-text="question.answer" x-show="!isReportEditable"></div>
611              <textarea class="text-content text-sm border-0 bg-transparent outline-none focus:outline-none bg-white rounded" :disabled="!isReportEditable" x-show="isReportEditable" rows="5" x-model="question.answer"></textarea>
612            </div>
613          </template>
614
615          <div class="text-center pt-4 pb-6" x-cloak>
616            <button class="rounded-full px-6 py-1 bg-primary-dark text-white mx-atuo hover:bg-primary" x-show="isReportEditable" @click="saveReport()">保存</button>
617          </div>
618        </div>
619
620      </div>
621    </div>
622
623    <!-- Topic panel -->
624    <div class="fixed inset-y-0 right-0 xl:right-144 shadow-lg border-gray-500 w-full sm:w-144 z-50 xl:z-0 bg-white flex flex-col items-stretch overflow-y-auto transition" style="background-color:#fcf5eb" x-show="isTopicPanelVisible" x-transition:enter="transition ease-linear duration-300"
625      x-transition:enter-start="translate-x-full"
626      x-transition:enter-end="translate-x-0"
627      x-transition:leave="transition ease-linear duration-300"
628      x-transition:leave-start="translate-x-0"
629      x-transition:leave-end="translate-x-full">
630      <button class="absolute ml-4 top-6 right-6" @click.stop="isTopicPanelVisible=false" tabIndex="1">
631        <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-gray.svg" alt="close">
632      </button>
633
634      <div class="flex flex-row flex-wrap pl-6 pr-12 my-6 gap-3">
635        <button class="rounded-full shadow inline-block font-normal text-sm py-2 px-5 min-w-20 text-center" :class="selectedTopicId ? 'bg-white text-content hover:bg-primary-light cursor-pointer' : 'bg-primary text-white'" @click="selectTopic()" tabIndex="1">全部</button>
636        <template x-for="topic in topics">
637          <button class="rounded-full shadow inline-block font-normal text-sm py-2 px-5 min-w-20 text-center" :class="selectedTopicId==topic.topic_id ? 'bg-primary text-white' : 'bg-white text-content hover:bg-primary-light cursor-pointer'" x-text="topic.zh" @click="selectTopic(topic.topic_id)" tabIndex="1"></button>
638        </template>
639      </div>
640
641      <div class="inset-0 flex flex-col space-y-4 px-6 flex-grow mb-6">
642        <template x-for="chatbot in selectedTopicId ? chatbots.filter(c => topics.find(t => t.topic_id == selectedTopicId).chatbots.includes(c.chatbot_id)) : chatbots">
643          <button class="w-full bg-white rounded-3xl shadow flex flex-row items-stretch overflow-hidden cursor-pointer image-card" @click.stop="showChatbotDetail(chatbot)" :key="chatbot.chatbot_id" tabIndex="1">
644            <div class="topic-thumbnail-container flex-shrink-0 overflow-hidden">
645              <img loading="lazy" class="w-full h-full object-center object-cover hover-scale" :src="chatbot.settings.thumbnail" alt="chatbot image">
646            </div>
647            <div class="flex-grow py-6 px-4 sm:px-6 flex flex-col items-start justify-between bg-white">
648              <!-- <div class="rounded-full bg-primary inline-block font-normal text-xs py-1 px-4 min-w-20 text-center text-white" x-text="getTopicName(chatbot.topic_id)"></div> -->
649              <p class="line-clamp-2 font-jinxuanlatte text-content" x-text="chatbot.settings.title.zh"></p>
650              <p class="text-primary text-sm font-bold hover:text-primary-dark">了解更多</p>
651            </div>
652          </button>
653        </template>
654      </div>
655    </div>
656
657    <template x-if="selectedChatbot">
658      <div class="fixed inset-y-0 right-0 xl:right-144 shadow-lg border-gray-500 w-full sm:w-144 z-50 xl:z-0 bg-white flex flex-col items-stretch overflow-y-auto transition" @click.stop="" style="background-color:#fcf5eb" x-show="isChatbotDetailPanelVisible">
659
660        <div class="w-full relative">
661          <img loading="lazy" class="w-full h-auto" :src="selectedChatbot.settings.cover_image" :alt="`chatbot image - ${selectedChatbot.settings.title.zh}`">
662          <button class="absolute top-6 left-6" @click="isChatbotDetailPanelVisible=false" tabIndex="1">
663            <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/back.svg" alt="back">
664          </button>
665          <button class="absolute top-6 right-6" @click.stop="isChatbotDetailPanelVisible=false;isTopicPanelVisible=false" tabIndex="1">
666            <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-white.svg" alt="close">
667          </button>
668        </div>
669        <div class="px-6 py-10 sm:py-14 sm:px-10">
670          <p class="text-lg font-jinxuanlatte text-primary-darkest" x-text="selectedChatbot.settings.title.zh"></p>
671          <p class="text-content text-sm mt-4" x-text="selectedChatbot.settings.description.zh"></p>
672          <div class="mt-10 text-center">
673            <button class="bg-start text-white rounded-full py-2 px-6 mx-auto hover:bg-start-dark" @click.stop="startChatbot(selectedChatbot.chatbot_id)" tabIndex="1">同阿本傾偈</button>
674          </div>
675        </div>
676      </div>
677    </template>
678
679
680    <!-- rating panel -->
681    <div class="fixed inset-y-0 right-0 shadow-lg border-gray-500 w-full sm:w-144 z-50 bg-white flex flex-col items-stretch justify-center h-screen" x-show="isChatbotRatingPanelVisible">
682      <div class="flex items-center justify-between px-5 flex-shrink-0 max-h-full overflow-auto py-6">
683        <button class="text-primary flex-shrink-0" @click="resetChatbotRating()" tabIndex="1">
684          <i class="fa-solid fa-chevron-left mr-2"></i>
685          返回對話
686        </button>
687
688        <button class="ml-4" @click.stop="closeChatbotPanel($dispatch)" tabIndex="1">
689          <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-gray.svg" alt="close">
690        </button>
691      </div>
692      <div class="flex-grow flex flex-col items-center justify-center flex-shrink-0 pb-12" x-show="ratingIndex == 1">
693        <img class="h-64 w-64" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot/rating.png" alt="rating">
694        <div class="mt-12 font-medium text-content">
694你有幾滿意呢次對話?</div>
695        <div class="flex mt-8">
696          <template x-for="i in 5">
697            <button class="fill-current flex-shrink-0 text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('overall', i)">
698              <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.overall >= i ? 'currentColor' : 'transparent'" stroke="currentColor">
699                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
700              </svg>
701            </button>
702          </template>
703        </div>
704      </div>
705
706      <div class="flex-grow flex flex-col items-center justify-center flex-shrink-0 pb-12" x-show="ratingIndex == 2" x-transition:enter.opacity>
707        <div class="text-xl text-content font-jinxuanlatte">呢次同阿本傾完之後,你有冇⋯⋯</div>
708
709        <div class="mt-6 font-medium text-content">更願意去傾自己嘅狀況?</div>
710        <div class="flex mt-2">
711          <template x-for="i in 5">
712            <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('willing_to_share', i)">
713              <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.willing_to_share >= i ? 'currentColor' : 'transparent'" stroke="currentColor">
714                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
715              </svg>
716            </button>
717          </template>
718        </div>
719
720        <div class="mt-6 font-medium text-content">更加想喺日常生活中以行動去改善自己嘅情況?</div>
721        <div class="flex mt-2">
722          <template x-for="i in 5">
723            <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('willing_to_try', i)">
724              <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.willing_to_try >= i ? 'currentColor' : 'transparent'" stroke="currentColor">
725                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
726              </svg>
727            </button>
728          </template>
729        </div>
730
731        <div class="mt-6 font-medium text-content">覺得會幫到自己嘅心理健康?</div>
732        <div class="flex mt-2">
733          <template x-for="i in 5">
734            <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('can_help', i)">
735              <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.can_help >= i ? 'currentColor' : 'transparent'" stroke="currentColor">
736                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
737              </svg>
738            </button>
739          </template>
740        </div>
741
742        <div class="mt-6 font-medium text-content">了解多咗點照顧自己嘅心理健康?</div>
743        <div class="flex mt-2">
744          <template x-for="i in 5">
745            <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('understand_more', i)">
746              <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.understand_more >= i ? 'currentColor' : 'transparent'" stroke="currentColor">
747                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
748              </svg>
749            </button>
750          </template>
751        </div>
752
753        <button class="mt-8 rounded-full bg-primary py-2 px-8 text-white hover:bg-primary-darker" tabIndex="1" @click="submitRating()">提交</button>
754      </div>
755
756      <div class="flex-grow flex flex-col items-center" x-show="ratingIndex == 3">
757        <div class="text-xl text-content font-jinxuanlatte">感謝你的寶貴回應!</div>
758        <button class="mt-16 rounded-full bg-primary py-2 px-12 text-white hover:bg-primary-darker" tabIndex="1" @click="closeChatbotPanel($dispatch)">好</button>
759      </div>
760    </div>
761  </div>
762</div>
763
764<script type="2ed2de0e287741bf6526c024-text/javascript">
765document.addEventListener('alpine:init', () => {
766  Alpine.data('chatbotData', () => ({
767    isEntranceVisible: false,
768    isChatbotPanelVisible: false,
769    isMessageSectionVisible: false,
770    isInputingVisible: true,
771    isReportSectionVisible: false,
772    isTopicPanelVisible: false,
773    isChatbotDetailPanelVisible: false,
774    isChatbotRatingPanelVisible: false,
775    isFavoritedMessageVisible: false,
776    isLoadingHistory: false,
777    lastScrollPos: 0,
778    messageList: [],
779    reportDetail: null,
780    defaultChatbotId: 143,
781    immediateHelpChatbotId: 159,
782    chatbotId: null,
783    chatId: null,
784    chatMessageDelay: 1500,
785    expectedUserResponse: null,
786    userMessage: null,
787    userSelection: [],
788    openedReportID: null,
789    currentLang: "zh-CHT",
790    restartChatbot: true,
791    selectedChatbot: null,
792    selectedTopicId: null,
793    chatbotRating: {
794      overall: 0,
795      willing_to_share: 0,
796      willing_to_try: 0,
797      can_help: 0,
798      understand_more: 0,
799    },
800    user_level: 0,
801    ratingIndex: 1,
802    newChat: true,
803    isReportEditable: false,
804    topics: [{"chatbots":["103","133","146","149","147"],"cn":"职场心理健康","en":"Workplace Mental Health","zh":"職場心理健康","topic_id":"28"},{"chatbots":["107"],"cn":"一起摘去标签","en":"Labels & Stigmas","zh":"一起摘去標籤","topic_id":"30"},{"chatbots":["104","109","111","139"],"cn":"自我探索之旅","en":"Self-Discovery","zh":"自我探索之旅","topic_id":"25"},{"chatbots":["108","111","112","124","125","105","148","168"],"cn":"走进情绪与身体","en":"Body & Mind","zh":"走進情緒與身體","topic_id":"27"},{"chatbots":["232"],"cn":"穿越故事岛","en":"Journey across the Storyland","zh":"穿越故事島","topic_id":"2530"},{"chatbots":["123","103","99","106","133"],"cn":"人际关系","en":"Relationship","zh":"人際關係","topic_id":"29"},{"chatbots":["109","110","149","147","148","168"],"cn":"日常心理呵护","en":"Mental Self-Care","zh":"日常心理呵護","topic_id":"26"}],
805    chatbots: [{"chatbot_id":"105","name":"Lv1\/2 Chatbot_眼光光等天光點算?","description":"眼光光等天光點算?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/06_Count-Sheep-Throughout-the-Night.webp","description":{"cn":"失眠令人好困扰!根据中大一项调查,每10个香港人就有7个遇到失眠问题,可见系都市人普遍遇到嘅问题。究竟可以点同失眠共处呢? ","en":"Insomnia can be so frustrating! According to a CUHK study, 7 out of 10 HK residents experience insomnia, demonstrating its widespreadness. How do we live with insomnia?","zh":"失眠令人好困擾!根據中大一項調查,每10個香港人就有7個遇到失眠問題,可見係都市人普遍遇到嘅問題。究竟可以點同失眠共處呢? "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/06_Count-Sheep-Throughout-the-Night.webp","title":{"cn":"眼光光等天光...点算?","en":"Hate Counting Sheep Throughout the Night?","zh":"眼光光等天光...點算?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-14 08:27:09","user_id":"5"},{"chatbot_id":"112","name":"Lv1\/2 Chatbot_調節情緒 「ABC PLEASE」","description":"調節情緒 「ABC PLEASE」","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/14_Emotion-Regulation-ABC-PLEASE-1.webp","description":{"cn":"强烈情绪反应为人带来唔少困扰。一齐练习调节情绪嘅技巧,学习累积积极情绪、建立自我掌控、同预早应对情景。","en":"Strong emotional reactions can be quite troublesome. Let\u0027s practice some emotion regulation skills, learn to accumulate positive emotions, build mastery, and cope ahead of emotion-arousing situations. ","zh":"強烈情緒反應為人帶來唔少困擾。一齊練習調節情緒嘅技巧,學習累積積極情緒、建立自我掌控、同預早應對情景。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/14_Emotion-Regulation-ABC-PLEASE-1.webp","title":{"cn":"调节情绪 “ABC PLEASE”","en":"Emotion Regulation with “ABC PLEASE”","zh":"調節情緒 「ABC PLEASE」"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 12:38:34","user_id":"5"}
805,{"chatbot_id":"232","name":"Storytaler Audio Story","description":"bot for storytaler audio story","settings":{"cover_image":"\/wp-content\/uploads\/2023\/08\/audio_mini_page.webp","description":{"cn":"在这个故事岛上,说书人会以声音导航,带你穿越各种风景,重现他们走过的路。不同风景,代表不同情绪,讲述的是生活的高低起跌,喜怒哀乐。诚邀你展开探访之旅,在故事岛上找到共鸣。","en":"","zh":"在這個故事島上,說書人會以聲音導航,帶你穿越各種風景,重現他們走過的路。不同風景,代表不同情緒,講述的是生活的高低起跌,喜怒哀樂。誠邀你展開探訪之旅,在故事島上找到共鳴。"},"thumbnail":"\/wp-content\/uploads\/2023\/08\/audio_mini_page.webp","title":{"cn":"穿越故事岛","en":"Journey across the Storyland (Chinese version only)","zh":"穿越故事島"}},"is_default":"0","is_start_directly":"1","create_timestamp":"2023-08-07 04:21:02","user_id":"5"},{"chatbot_id":"107","name":"Lv1\/2 Chatbot_對抗污名與標籤","description":"對抗污名與標籤","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/11_Fighting-Stigma-and-Labelling.webp","description":{"cn":"有精神病嘅人承受社会对佢哋嘅标签同歧视。看似冇恶意嘅字句,可能已经隐含着贬抑意味。对抗污名,可以由了解开始,积少成多,相信会推动到社会改变。","en":"People with mental illness are often being stigmatized and discriminated against in the society. Although generally used without malice, our choice of words and use of labels contain derogatory implications. We can end stigma by first seeking to understand. Little by little, we can impact change at the societal level. ","zh":"有精神病嘅人承受社會對佢哋嘅標籤同歧視。看似冇惡意嘅字句,可能已經隱含著貶抑意味。對抗污名,可以由了解開始,積少成多,相信會推動到社會改變。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/11_Fighting-Stigma-and-Labelling.webp","title":{"cn":"对抗污名与标签","en":"Fighting Stigma and Labelling ","zh":"對抗污名與標籤"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 06:43:42","user_id":"5"},{"chatbot_id":"103","name":"Lv1\/2 Chatbot_怕比意見會hurt到人?","description":"怕比意見會hurt到人?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/02_How-to-Give-Advice.webp","description":{"cn":"提出意见时,明明本着善意,点解对方却嬲咗?原来提出意见时嘅语气、内容、场合等等,都有唔同技巧可以学习,帮助我哋以更体贴方式回应对方需要。 ","en":"Why do people get mad at us even when we offered our advice with genuinely good intentions? Turns out, there are skills we can learn (tone, content, context, etc.) which could help us to sensitively and considerately respond to others\u0027 needs. ","zh":"提出意見時,明明本著善意,點解對方卻嬲咗?原來提出意見時嘅語氣、內容、場合等等,都有唔同技巧可以學習,幫助我哋以更體貼方式回應對方需要。 "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/02_How-to-Give-Advice.webp","title":{"cn":"怕比意见会hurt到人?","en":"Worried that Giving Advice Would Hurt Others‘ Feelings?","zh":"怕比意見會hurt到人?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-11 16:08:28","user_id":"5"},{"chatbot_id":"133","name":"Lv1\/2 Chatbot_面對批評","description":"Lv1\/2 Chatbot_面對批評","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/18_Facing-Criticism.webp","description":{"cn":"受到批评,情绪好易被牵引,反应走向两个极端:全盘接受或者一一否定。我哋可以点理解及过滤批评?回应方式同态度又有咩选择?","en":"Nothing triggers our emotions as easily as criticism does. We tend to give polar responses - total acceptance or total rejection. How can we better comprehend and filter through criticism? What choices do we have in our responses and attitudes? ","zh":"受到批評,情緒好易被牽引,反應走向兩個極端:全盤接受或者一一否定。我哋可以點理解及過濾批評?回應方式同態度又有咩選擇?"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/18_Facing-Criticism.webp","title":{"cn":"面对批评","en":"Facing Criticism ","zh":"面對批評"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-09-02 07:15:50","user_id":"5"},{"chatbot_id":"146","name":"Lv1\/2_份工做到冇哂癮","description":"Lv1\/2_份工做到冇哂癮","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/19_Burnout-at-Work.webp","description":{"cn":"番工番到颓颓哋,冇晒动力?亲爱的,你并唔孤单。透过厘清乜嘢影响工作动力,了解一下问题所在,从而深思工作对你嘅意义呀~~","en":"Feeling unmotivated at work? My dear, you are not alone. Through clarifying what affects your work motivation, you may understand the underlying issues, and reflect on your meaning at work.","zh":"番工番到頹頹哋,冇晒動力?親愛的,你並唔孤單。透過釐清乜嘢影響工作動力,了解一下問題所在,從而深思工作對你嘅意義呀~~"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/19_Burnout-at-Work.webp","title":{"cn":"份工做到冇哂瘾","en":"So Not Enthused about Work...","zh":"份工做到冇哂癮"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 13:06:23","user_id":"5"},{"chatbot_id":"149","name":"Lv1\/2 Chatbot_重塑回應壓力嘅習慣","description":"Lv1\/2 Chatbot_重塑回應壓力嘅習慣","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/23_Stress-Response-Practice.webp","description":{"cn":"你有压力,我有压力!咁有压力时,你系点回应呢?\r\n每个人都有唔同习惯去回应压力。有啲明知唔健康,但又控制唔到,变相形成恶性循环。想唔想谂更多选项比自己,更灵活同健康地回应压力呢?一齐倾吓呀!","en":"I’m stressed and you’re stressed. So how do you manage your stress? We all c
805ope with stress differently. Sometimes, we feel out of control and cope with stress in unhealthy ways, trapping us in a vicious cycle. Do you want to provide yourself with more options, responding to stress in a more flexible and healthy ways? Let’s talk about it.","zh":"你有壓力,我有壓力!咁有壓力時,你係點回應呢?\r\n每個人都有唔同習慣去回應壓力。有啲明知唔健康,但又控制唔到,變相形成惡性循環。想唔想諗更多選項比自己,更靈活同健康地回應壓力呢?一齊傾吓呀!"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/23_Stress-Response-Practice.webp","title":{"cn":"重塑回应压力嘅习惯","en":"Reshaping Our Response to Stress","zh":"重塑回應壓力嘅習慣"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-16 07:30:08","user_id":"5"},{"chatbot_id":"147","name":"Lv1\/2 Chatbot_壓力係動力定阻力?","description":"壓力係動力定阻力?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/20_Motivated-by-Stress.webp","description":{"cn":"压力好似好得人惊,大家见到都想掉头走。但适度压力又可以成为推动力,帮我哋向难度挑战!究竟压力系乜东东呢?佢又点驱使人有唔同反应呢?入嚟倾吓。","en":"Stress may seem scary; we all want to turn our heads away from it. However, optimal level of stress can be a source of motivation, encouraging us to prevail over challenge. So what exactly is stress? How does it lead to different responses in people? Come chat with me…","zh":"壓力好似好得人驚,大家見到都想掉頭走。但適度壓力又可以成為推動力,幫我哋向難度挑戰!究竟壓力係乜東東呢?佢又點驅使人有唔同反應呢?入嚟傾吓。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/20_Motivated-by-Stress.webp","title":{"cn":"压力系动力定阻力?","en":"Stress - Motivator or Obstacle","zh":"壓力係動力定阻力?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 16:35:11","user_id":"5"},{"chatbot_id":"104","name":"Lv1\/2 Chatbot_你過緊想過嘅生活嗎?","description":"你過緊想過嘅生活嗎?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/01_Living-the-Life-You-Want.webp","description":{"cn":"好多人都对生活充满住想像及期望,你心中嘅理想生活又是点呢?如果你想的话,试吓一齐订立目标,并计划行动,将目标实践出来,为迈向理想生活努力。 ","en":"Many people have hopes and dreams for their lives. What does your \"ideal life\" look like? If you are interested, let\u0027s set some goals and courses of action and work together to live them out and move towards the ideal life! ","zh":"好多人都對生活充滿住想像及期望,你心中嘅理想生活又是點呢?如果你想的話,試吓一齊訂立目標,並計劃行動,將目標實踐出來,為邁向理想生活努力。 "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/01_Living-the-Life-You-Want.webp","title":{"cn":"你过紧想过嘅生活吗?","en":"Are You Living the Life You Want to Live?","zh":"你過緊想過嘅生活嗎?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-13 13:47:04","user_id":"18"},{"chatbot_id":"109","name":"Lv1\/2 Chatbot_孤獨 VS 一人之境","description":"孤獨 VS 一人之境","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/10_Loneliness-vs-Solitude.webp","description":{"cn":"孤独感好普遍,系几乎每个人都经历过嘅感受。学习面对孤独感,揾一个身心得以安顿之处。","en":"Loneliness is a ubiquitous human emotion. Here, we explore whether it is possible to be alone but not lonely, learning to face loneliness and finding an internal haven to settle the body and mind. ","zh":"孤獨感好普遍,係幾乎每個人都經歷過嘅感受。學習面對孤獨感,搵一個身心得以安頓之處。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/10_Loneliness-vs-Solitude.webp","title":{"cn":"孤独 vs. 一人之境","en":"Loneliness vs. Solitude","zh":"孤獨 vs. 一人之境"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:35:26","user_id":"5"}
805,{"chatbot_id":"111","name":"Lv1\/2 Chatbot_講吓靜觀 ─「你喺邊呀?」","description":"講吓靜觀 ─「你喺邊呀?」","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/15_Mindfulness-Where-are-You.webp","description":{"cn":"生活中,我哋好习惯启动“自动导航”模式,不知不觉对外界事物作出反应,反而冇留意自己身体、情绪、思想嘅状态。一齐透过练习静观,重新体验生活。","en":"Most of the time, we are running on autopilot, instinctively reacting to things around us, and might not pay conscious attention to the state of our body, emotions and mind. Through mindfulness, let\u0027s experience life in a new way!","zh":"生活中,我哋好習慣啟動「自動導航」模式,不知不覺對外界事物作出反應,反而冇留意自己身體、情緒、思想嘅狀態。一齊透過練習靜觀,重新體驗生活。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/15_Mindfulness-Where-are-You.webp","title":{"cn":"讲吓静观 ─ “自动导航”熄一熄?","en":"Mindfulness – “Hello, Where are you?”","zh":"講吓靜觀 ─ 「自動導航」熄一熄?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 11:08:35","user_id":"5"},{"chatbot_id":"139","name":"Lv1\/2 Chatbot_思考吓人生 – 關於價值同目標 ","description":"思考吓人生 – 關於價值同目標 ","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/03_Giving-Thought-to-Your-Life-1.webp","description":{"cn":"价值观就好似指南针,指引住人生方向,令我哋知道点作出取舍。喺呢个话题中,你或者可以透过唔同问题,更认清自己所重视嘅价值,并尝试订立切实可行嘅目标。 ","en":"Values are like a compass, pointing out our life direction and guiding our decisions. In this topic, hopefully you can more clearly define the values most important to you and set practical and actionable goals through the process of self-discovery. ","zh":"價值觀就好似指南針,指引住人生方向,令我哋知道點作出取捨。喺呢個話題中,你或者可以透過唔同問題,更認清自己所重視嘅價值,並嘗試訂立切實可行嘅目標。 "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/03_Giving-Thought-to-Your-Life-1.webp","title":{"cn":"我嘅价值观系咩?","en":"Giving Thought to Your Life – Values and Goals","zh":"我嘅價值觀係咩?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-09-14 16:31:13","user_id":"5"},{"chatbot_id":"108","name":"Lv1\/2 Chatbot_身心奧妙關係","description":"身心奧妙關係","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/17_Relationship-of-Body-and-Mind_80.webp","description":{"cn":"身体同情绪之间系互为影响,身体会发出信号反映情绪;而情绪亦会影响身体。透过一连串有趣嘅实验,一齐去了解身心奥妙关系啦!","en":"Our body and our emotions constantly interact and impact each other - our body sends signals to reflect emotions, while emotions also affect our bodily sensations. Through a series of fun little experiments, let\u0027s learn more about the mind-body relationship! ","zh":"身體同情緒之間係互為影響,身體會發出信號反映情緒;而情緒亦會影響身體。透過一連串有趣嘅實驗,一齊去了解身心奧妙關係啦!"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/17_Relationship-of-Body-and-Mind_80.webp","title":{"cn":"身心奥妙关系","en":"The Wondrous Relationship between Body and Mind","zh":"身心奧妙關係"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:04:56","user_id":"5"},{"chatbot_id":"124","name":"Lv1\/2 Chatbot_想放負得唔得","description":"想放負得唔得","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/12_Release-Negativity.webp","description":{"cn":"想呻但又担心自己放负?喺呢个话题入面,你可以透过认识情绪,尝试选择啱自己嘅表达方法,并学习尊重同接纳情绪。","en":"Have you ever wanted to vent but worry that people might find you too negative? In this topic, through understanding your emotions, you can choose ways of expression most suited for you, while learning to respect and accept different emotions.  ","zh":"想呻但又擔心自己放負?喺呢個話題入面,你可以透過認識情緒,嘗試選擇啱自己嘅表達方法,並學習尊重同接納情緒。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/12_Release-Negativity.webp","title":{"cn":"想放负得唔得","en":"May I Release Some Negativity...","zh":"想放負得唔得"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-24 17:10:36","user_id":"5"}
805,{"chatbot_id":"125","name":"Lv1\/2 Chatbot_認識情緒 101","description":"認識情緒 101","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/13_Understand-Emotions-101.webp","description":{"cn":"情绪并冇好坏之分,每种情绪都有各自功能。让我哋一齐认识情绪,学习同唔同情绪共处。","en":"Emotions are neither good or bad. Each fulfills its own specific function. Let\u0027s get to know emotions better and co-exist peacefully with them. ","zh":"情緒並冇好壞之分,每種情緒都有各自功能。讓我哋一齊認識情緒,學習同唔同情緒共處。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/13_Understand-Emotions-101.webp","title":{"cn":"认识情绪101","en":"Understanding Our Emotions 101","zh":"認識情緒101"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-25 08:25:13","user_id":"5"},{"chatbot_id":"148","name":"Lv1\/2 Chatbot_照顧自己,同壓力做室友","description":"照顧自己,同壓力做室友","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/21_Being-Friend-with-Stress.webp","description":{"cn":"你最近感到大压力吗?压力看似无形,但身体、思想、情绪同行为都一直发出压力信号,只要留心观察,就可以聆听到自己嘅需要。呢度亦会分享几个自我照顾技巧,帮助你同压力共处。","en":"Are you stressed recently? Stress may seem invisible, yet our body, thoughts, emotions, and behaviours keep sending us stress signals. If you pay close attention to the signals, you will know your own needs. Here, we will share some self-care tips that may help you live with stress.","zh":"你最近感到大壓力嗎?壓力看似無形,但身體、思想、情緒同行為都一直發出壓力信號,只要留心觀察,就可以聆聽到自己嘅需要。呢度亦會分享幾個自我照顧技巧,幫助你同壓力共處。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/21_Being-Friend-with-Stress.webp","title":{"cn":"照顾自己,同压力做室友","en":"Stress as Our Roommate","zh":"照顧自己,同壓力做室友"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 17:29:55","user_id":"5"},{"chatbot_id":"168","name":"Lv1\/2 Chatbot_當憤怒突然到訪時 – 「回應vs反應」","description":"當憤怒突然到訪時 – 「回應vs反應」","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/22_Response-to-Anger.webp","description":{"cn":"嬲,令人好易自然地“反应”,有时仲会做出不能自控嘅行为,被情绪牵住鼻走。留少少时间,我哋一齐练习“回应”嬲,而唔系单单“反应”。","en":"Anger may direct us to “react” naturally, act out uncontrollably, and dragged by emotions. Let’s take some time practicing how to “respond” instead of “react” to anger.","zh":"嬲,令人好易自然地「反應」,有時仲會做出不能自控嘅行為,被情緒牽住鼻走。留少少時間,我哋一齊練習「回應」嬲,而唔係單單「反應」。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/22_Response-to-Anger.webp","title":{"cn":"当愤怒突然到访时 – “回应vs反应”","en":"When Anger Knocks on Your Door - React or Respond","zh":"當憤怒突然到訪時 – 「回應vs反應」"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-11-01 09:26:10","user_id":"5"},{"chatbot_id":"123","name":"Lv1\/2 Chatbot_面對衝突?","description":"面對衝突","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/07_Facing-Conflicts.webp","description":{"cn":"人际关系中难免出现冲突,但冲突并唔一定系坏事。点样能够有意识地调节不满情绪,并灵巧地将冲突转化成为了解对方嘅机会? ","en":"Conflicts may be inevitable in relationships, but are not necessarily detrimental. How can we purposefully handle dissatisfaction and turn it into opportunities to understand each other better? ","zh":"人際關係中難免出現衝突,但衝突並唔一定係壞事。點樣能夠有意識地調節不滿情緒,並靈巧地將衝突轉化成為了解對方嘅機會? "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/07_Facing-Conflicts.webp","title":{"cn":"面对冲突?","en":"Facing Interpersonal Conflicts","zh":"面對衝突?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-24 16:28:29","user_id":"5"},{"chatbot_id":"99","name":"Lv1\/2 Chatbot_點樣同人「心」度溝通?","description":"Tips for having effective communication \/ being a good listener \/ mindfulness","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/08_Communicate-with-Heart.webp","description":{"cn":"沟通系人际关系中重要一课。喺分享同倾听嘅过程中,我哋可以同人建立深厚关系,并获得支援以解决种种难题。 不如一齐探讨吓沟通技巧,学习用同理心、耐心同用心去回应对方呀。‌ ","en":"Communication is key to social relationships. We build deep relationships and strong bonds with others through sharing and listening. Through these relationships, we receive the support needed to face challenges.  \r\n\r\nLet\u0027s discu
805ss communication skills and learn to respond to others with empathy and patience.","zh":"溝通係人際關係中重要一課。喺分享同傾聽嘅過程中,我哋可以同人建立深厚關係,並獲得支援以解決種種難題。 不如一齊探討吓溝通技巧,學習用同理心、耐心同用心去回應對方呀。‌ "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/08_Communicate-with-Heart.webp","title":{"cn":"点样同人“心”度沟通?","en":"How to Communicate with Others from the Heart?","zh":"點樣同人「心」度溝通?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-05 18:02:52","user_id":"5"},{"chatbot_id":"106","name":"Lv1\/2 Chatbot_點樣好好陪伴他人?","description":"點樣好好陪伴他人?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/09_Truely-be-There-for-Others.webp","description":{"cn":"眼见身边人有困难,我哋好自然会急住帮对方解决问题,但有时却唔清楚对方最需要咩支援。你有冇谂过,关键系在于先聆听呢?一齐练习真诚聆听、用心感受对方需要,成为同行中嘅陪伴者。 ","en":"When we see our loved ones struggling, we naturally want to help them solve their problems, but we might not know what sort of support they truly need. Did you know that the key to supporting starts with proper listening? Let\u0027s practice how to listen with sincerity, empathizing with their needs in a heart-felt way, and becoming a better companion\/supporter! ","zh":"眼見身邊人有困難,我哋好自然會急住幫對方解決問題,但有時卻唔清楚對方最需要咩支援。你有冇諗過,關鍵係在於先聆聽呢?一齊練習真誠聆聽、用心感受對方需要,成為同行中嘅陪伴者。 "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/09_Truely-be-There-for-Others.webp","title":{"cn":"点样好好陪伴他人?","en":"How to Truly be There for Others?","zh":"點樣好好陪伴他人?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-15 15:31:02","user_id":"5"},{"chatbot_id":"110","name":"Lv1\/2 Chatbot_越睇新聞越消沉?","description":"越睇新聞越消沉?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/16_Depressed-by-the-News.webp","description":{"cn":"想即时紧贴社会大事,但新闻消息却令你觉得世界变得更差吗?等我哋规划好自我照顾同接收资讯嘅界线,同时学习聚焦喺美好嘅事上,同生活建立更紧密嘅联系。","en":"Want to stay in the know, keeping abreast of social events, but can\u0027t help but feel like the world is a worse place with each news headline? It is important for us to set healthy boundaries between self-care and keeping up with the news, while learning to savour what\u0027s happening around us, building a tighter connection with the details of our lives. ","zh":"想即時緊貼社會大事,但新聞消息卻令你覺得世界變得更差嗎?等我哋規劃好自我照顧同接收資訊嘅界線,同時學習聚焦喺美好嘅事上,同生活建立更緊密嘅聯繫。"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/16_Depressed-by-the-News.webp","title":{"cn":"越睇新闻越消沉?","en":"The More I Read the News the More Depressed I Get","zh":"越睇新聞越消沉?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:48:58","user_id":"5"}],
806    init() {
807      // this.selectedChatbot = this.chatbots[0];
808          },
809    showChatbotDetail(chatbot) {
810      this.isChatbotDetailPanelVisible = true;
811      this.selectedChatbot = chatbot;
812    },
813    startChatbot(chatbot_id) {
814      this.isTopicPanelVisible = false;
815      this.isChatbotDetailPanelVisible = false;
816      this.openChatbotPanel(chatbot_id);
817    },
818    selectOption(e, option) {
819      if (e.key === 'Enter') {
820        this.userMessage = option;
821      }
822    },
823    async openChatbotPanel(chatbot_id = this.defaultChatbotId) {
824      if (chatbot_id != this.chatbotId) {
825        this.chatbotId = chatbot_id;
826        this.restartChatbot = true;
827      }
828      console.log(this.chatbotId);
829      this.isChatbotPanelVisible = true;
830      $("body").addClass("overflow-hidden");
831      this.isMessageSectionVisible = true;
832      this.isInputingVisible = true;
833      this.messageList = [];
834      this.expectedUserResponse = null;
835      this.resetChatbotRating();
836      $.ajax({
837          type: "POST",
838          url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/c
838hat/start/",
839          data: JSON.stringify({
840            lang: this.currentLang,
841            chatbot_id: this.chatbotId,
842            // user_id: -1,
843            // restart: (this.messageList.length == 0) ? true : false,
844            restart: this.restartChatbot
845          })
846        })
847        .done((data) => {
848          console.log(data);
849          this.restartChatbot = false;
850          this.chatId = data.chat_id;
851          this.displayResponses(data);
852        });
853
854      this.user_level = await this.getUserLevel();
855    },
856    async getUserLevel() {
857      return await $.ajax({
858        type: "GET",
859        url: "https://www.jcthplus.org/api/1.0/tourheart-db/get-user-level",
860      }).then(response => response.user_level);
861    },
862    selectTopic(id = null) {
863      this.selectedTopicId = id;
864    },
865    async closeChatbotPanel(dispatch) {
866      this.isChatbotPanelVisible = false;
867      $("body").removeClass("overflow-hidden");
868      this.isTopicPanelVisible = false;
869      this.isChatbotDetailPanelVisible = false;
870      this.isMessageSectionVisible = true;
871      this.isReportSectionVisible = false;
872      this.isReportEditable = false;
873      this.userMessage = null;
874      this.resetChatbotRating();
875
876      const level = await this.getUserLevel();
877
878      dispatch('reload-assessment');
879    },
880    checkNeedRating(dispatch) {
881            this.closeChatbotPanel(dispatch);
882          },
883    openReportPanel(report_id, report_time) {
884      $.ajax({
885          type: "GET",
886          url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/report/get-report/",
887          data: { report_id }
888        })
889        .done((data) => {
890          console.log(data);
891          this.openedReportID = report_id;
892          this.reportDetail = data.content;
893          this.reportDetail.timestamp = report_time;
894          this.isReportSectionVisible = true;
895        });
896    },
897    displayResponses(response) {
898      this.hideInputing();
899      if ("chat_logs" in response) {
900        this.messageList = response.chat_logs;
901        this.newChat = false;
902
903        if ("chatbot_response" in response) {
904          response.chatbot_response.forEach(msg => {
905            this.displayReceivedMessage(msg);
906          });
907        }
908
909        if ("expected_user_response" in response) {
910          this.displayExpectedUserResponse(response.expected_user_response);
911        }
912      } else {
913        this.newChat = true;
914        this.displayReceivedMessage(response.chatbot_response[0]);
915
916        if (response.chatbot_response.length > 1) {
917          this.showInputing();
918          let i = 1;
919          const interval = setInterval(() => {
920            this.hideInputing();
921            this.displayReceivedMessage(response.chatbot_response[i]);
922
923            if (++i >= response.chatbot_response.length) {
924              clearInterval(interval);
925              // display expected response
926              this.displayExpectedUserResponse(response.expected_user_response);
927            } else {
928              this.showInputing();
929            }
930          }, this.chatMessageDelay);
931        } else {
932          // display expected response
933          this.displayExpectedUserResponse(response.expected_user_response);
934        }
935      }
936    },
937    displayExpectedUserResponse(expected_user_response) {
938      if (expected_user_response) {
939        if (expected_user_response.reply_type == "multiple-options") {
940          const length = expected_user_response.reply_content.length;
941          this.userSelection = Array(length).fill(false);
942          console.log(this.userSelection)
943        }
944
945        this.expectedUserResponse = expected_user_response;
946      }
947    },
948    displayReceivedMessage(message) {
949      this.messageList.push({ ...message, from: "chatbot" });
950    },
951    showInputing() {
952      this.isInputingVisible = true;
953      this.scrollToBottom();
954    },
955    hideInputing() {
956      this.isInputingVisible = false;
957      this.scrollToBottom();
958    },
959    sendUserMessage(message = null) {
960      event.stopPropagation();
961      this.messageList.push({
962        from: "user",
963        content_type: "text",
964        content_data: this.userMessage,
965        chat_id: this.chatId,
966        message_id: "user_" + this.messageList.length
967      });
968
969      this.expectedUserResponse = null;
970      this.showInputing();
971
972      $.ajax({
973          type: "POST",
974          url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/c
974hat/send-message/",
975          data: JSON.stringify({
976            chat_id: this.chatId,
977            message: this.userMessage
978          })
979        })
980        .done((data) => {
981          console.log(data);
982          if ("chat_id" in data) {
983            this.chatId = data.chat_id;
984          }
985          this.displayResponses(data);
986          this.userMessage = null;
987        });
988    },
989    sendUserMessageMultipleOptions() {
990      this.userMessage = "";
991      const selectedOptions = [];
992      this.userSelection.forEach((selection, index) => {
993        if (selection) {
994          selectedOptions.push(this.expectedUserResponse.reply_content[index]);
995        }
996      });
997
998      this.userMessage = selectedOptions.join("<br>");
999      this.sendUserMessage();
1000    },
1001    scrollToBottom() {
1002      $("#chat-messages", "#chatbot-panel").animate({ scrollTop: 10000 }, "fast");
1003    },
1004    handleScroll(e) {
1005      if (this.messageList.length == 0) {
1006        return false;
1007      }
1008      if (e.target.scrollTop < 100 && !this.isLoadingHistory && e.target.scrollTop < this.lastScrollPos) {
1009        this.isLoadingHistory = true;
1010        let startHeight = this.$refs.messages.scrollHeight;
1011        let scrollTop = this.$refs.messages.scrollTop;
1012        if (startHeight == 0) {
1013          startHeight = 1;
1014        }
1015
1016        $.ajax({
1017            type: "POST",
1018            url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/chat/load-history/",
1019            data: JSON.stringify({ message_id: this.messageList[0].message_id })
1020          })
1021          .done((data) => {
1022            console.log(data);
1023            if (data) {
1024              this.isLoadingHistory = false;
1025
1026              this.$nextTick(() => {
1027                if (this.$refs.messages.scrollTop == 0) {
1028                  this.$refs.messages.scrollTop = 1;
1029                }
1030
1031                this.messageList = data.concat(this.messageList);
1032              })
1033            }
1034          });
1035      }
1036
1037      this.lastScrollPos = this.$refs.messages.scrollTop;
1038    },
1039    openLoginPanel() {
1040      this.isLoginPanelVisible = true;
1041    },
1042    favoriteMessage(message) {
1043      console.log(message);
1044      message.favorited = !message.favorited;
1045
1046      $.ajax({
1047        url: "/api/1.0/tourheart-db/update-user-favorite/",
1048        dataType: "json",
1049        method: "POST",
1050        data: JSON.stringify({
1051          content: {
1052            category: 'chatbot',
1053            id: Number(message.message_id) ?? "new_message_" + new Date().getTime(),
1054            type: message.content_type,
1055            content: message.content_data
1056          },
1057          action: message.favorited ? 'add' : 'delete'
1058        }),
1059        success: (data) => {
1060          if (message.favorited) {
1061            message.id = data.id;
1062            this.isFavoritedMessageVisible = true;
1063            setTimeout(() => {
1064              this.isFavoritedMessageVisible = false;
1065            }, 2500);
1066          }
1067        },
1068        error: (error) => {
1069          message.favorited = !message.favorited;
1070          console.log(data);
1071        }
1072      });
1073    },
1074    resetChatbotRating() {
1075      console.log("reset rating");
1076      this.isChatbotRatingPanelVisible = false;
1077      this.ratingIndex = 1;
1078      this.chatbotRating = {
1079        overall: 0,
1080        willing_to_share: 0,
1081        willing_to_try: 0,
1082        can_help: 0,
1083        understand_more: 0,
1084      }
1085    },
1086    rate(item, value) {
1087      this.chatbotRating[item] = value;
1088      if (item == 'overall') {
1089        setTimeout(() => {
1090          this.ratingIndex = 2;
1091        }, 800);
1092      }
1093    },
1094    submitRating() {
1095      // submit ajax
1096      $.ajax({
1097          type: "POST",
1098          url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/chat/rate-chatbot/",
1099          data: JSON.stringify({
1100            chat_id: this.chatId,
1101            chatbot_id: this.chatbotId,
1102            user_id: 0,
1103            rating: this.chatbotRating
1104          })
1105        })
1106        .done((data) => {
1107          console.log(data);
1108          this.ratingIndex = 3;
1109        });
1110    },
1111    saveReport() {
1112      const answers = [];
1113      this.reportDetail.report_content.forEach((question) => {
1114        answers.push(question.answer ?? "");
1115      });
1116      $.ajax({
1117          type: "POST",
1118          url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/report/save-report/",
1119          data: JSON.stringify({
1120            report_id: this.openedReportID,
1121            answers,
1122            timestamp: this.reportDetail.timestamp
1123          })
1124        })
1125        .done((data) => {
1126          console.log(data);
1127          this.closeReportPanel();
1128        });
1129    },
1130    closeReportPanel() {
1131      this.isReportSectionVisible = false;
1132      this.reportDetail = null;
1133      this.isReportEditable = false;
1134    },
1135    getDateTime(time) {
1136      const date = new Date(time * 1000);
1137      return "首次保存於 " + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + (
1138        "0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
1139    }
1140  }));
1141});
1142</script>
1142
1143<footer class="w-full new_container gap-y-8 flex-shrink-0 opacity-100 z-0 bg-new-primary_green_400 py-6 new_md:py-10 new_sm:auto-rows-auto new_sm:gap-y-6">
1144  <div class="col-span-full flex flex-col new_sm:flex-row items-center new_sm:items-start space-y-6 new_sm:space-y-0 gap-x-6 new_sm:gap-x-2 new_md:gap-x-6 new_sm:order-1 new_sm:pb-2 new_lg:order-3 new_lg:col-span-3 new_lg:row-span-2 new_lg:col-start-7 new_lg:row-start-1">
1145    <p class="text-white body_1 font-semibold text-center mb-2">下載應用程式</p>
1146    <div class="flex flex-row items-stretch new_lg:items-start space-x-4 new_sm:space-x-2 new_md:space-x-6 new_lg:flex-col new_lg:space-x-0 new_lg:space-y-4">
1147      <div class="flex flex-col items-stretch justify-between shrink-0 new_lg:space-y-4">
1148        <a href="https://apps.apple.com/hk/app/%E8%B3%BD%E9%A6%AC%E6%9C%83%E5%BF%83%E5%B0%8E%E9%81%8A-%E8%A8%88%E5%8A%83/id1619066368">
1149          <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/download-badge-ios-zh.svg" class="w-30 new_sm:w-24 new_md:w-30 h-auto" alt="Download on the App Store">
1150        </a>
1151        <a href="https://play.google.com/store/apps/details?id=com.labviso.jcthplus">
1152          <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/download-badge-android-zh.svg" class="w-30 new_sm:w-24 new_md:w-30 h-auto" alt="Get it on Google play">
1153        </a>
1154      </div>
1155      <div class="rounded-md bg-white p-2 new_sm:p-1.5 shrink-0">
1156        <img class="w-18 h-18 new_sm:w-14 new_sm:h-14 new_md:w-18 new_md:h-18" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/qr-download.jpeg" alt="Get the App using QR Code">
1157      </div>
1158    </div>
1159    <div class="flex flex-row items-center space-x-4 new_sm:space-x-2 new_md:space-x-6 shrink-0 new_lg:hidden">
1160      <a href="https://www.digital-accessibility.hk/" target="_blank">
1161        <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-app.webp" class="w-30 new_sm:w-26 new_md:w-30 h-auto" alt="Digital accessibility award - App">
1162      </a>
1163      <a href="https://www.digital-accessibility.hk/" target="_blank">
1164        <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-web.webp" class="w-30 new_sm:w-26 new_md:w-30 h-auto" alt="Digital accessibility award - web">
1165      </a>
1166    </div>
1167  </div>
1168
1169  <div class="col-span-full new_sm:col-span-5 new_md:col-span-4 new_sm:w-full flex flex-col new_sm:flex-row items-center new_sm:justify-between new_lg:justify-start new_sm:space-x-4 new_sm:order-4 new_lg:order-6 new_lg:col-span-3 new_lg:col-start-7 new_lg:row-start-3">
1170    <p class="text-white body_1 font-semibold text-center mb-2 new_sm:mb-0 shrink-0">關注我們</p>
1171    <div class="flex items-center space-x-4 new_sm:space-x-0 new_sm:grow new_sm:justify-between max-w-[140px] shrink-0">
1172      <a target="_blank" href="https://www.facebook.com/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to facebook page"><i class="fa-brands fa-facebook-f text-2xl text-new-primary_green_400"></i></a>
1173      <a target="_blank" href="https://www.instagram.com/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to instagram page"><i class="fa-brands fa-instagram text-2xl text-new-primary_green_400"></i></a>
1174      <a target="_blank" href="https://www.linkedin.com/company/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to linkedin page"><i class="fa-brands fa-linkedin-in text-2xl text-new-primary_green_400"></i></a>
1175    </div>
1176  </div>
1177
1178  <div class="col-span-full new_sm:col-span-3 flex flex-col items-center new_sm:items-start space-y-2 new_sm:order-2 new_sm:row-span-2 new_lg:order-1 new_lg:col-start-1 new_lg:row-start-1 new_lg:row-span-1">
1179    <a href="/events" class="body_1 text-white hover:text-new-accent_yellow">活動</a>
1180    <a href="/articles" class="body_1 text-white hover:text-new-accent_yellow">文章</a>
1181    <a href="/article/what-is-cognitive-behavioral-therapy" class="body_1 text-white hover:text-new-accent_yellow">認知行為治療</a>
1182    <a href="/article/what-is-mindfulness" class="body_1 text-white hover:text-new-accent_yellow">靜觀</a>
1183    <a href="/article/what-is-cbt-i" class="body_1 text-white hover:text-new-accent_yellow">失眠治療</a>
1184  </div>
1185
1186  <div class="col-span-full new_sm:col-span-4 flex flex-col items-center new_sm:items-start space-y-2 new_sm:order-3 new_sm:row-span-2 new_lg:order-2 new_lg:col-span-3 new_lg:row-span-4 new_lg:row-start-1 new_lg:col-start-4">
1187    <a href="/about-us" class="body_1 text-white hover:text-new-accent_yellow">關於我們</a>
1188    <a href="/our-research" class="body_1 text-white hover:text-new-accent_yellow">我們的研究</a>
1189    <a href="/app" class="body_1 text-white hover:text-new-accent_yellow">JC TourHeart+&nbsp;應用程式</a>
1190    <a href="/faq" class="body_1 text-white hover:text-new-accent_yellow">常見問題</a>
1191    <a href="/personal-information-collection-statement" class="body_1 text-white hover:text-new-accent_yellow">個人資料收集聲明</a>
1192    <a href="/cookie-policy" class="body_1 text-white hover:text-new-accent_yellow">Cookie&nbsp;政策</a>
1193    <a href="/terms-and-conditions" class="body_1 text-white hover:text-new-accent_yellow">條款及細則</a>
1194    <a href="/privacy-policy" class="body_1 text-white hover:text-new-accent_yellow">私隱政策</a>
1195  </div>
1196
1197  <div class="col-span-full new_sm:col-span-5 flex flex-col items-stretch space-y-4 new_sm:order-5 new_lg:order-5 new_lg:col-span-3 new_lg:row-span-3 new_lg:row-start-2 new_lg:col-start-1">
1198    <a href="/immediate-help" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-3 px-6 bg-new-primary_orange_900 hover:bg-new-primary_orange_900_hover text-white body_1 font-semibold text-center">
1198即時心理支援</a>
1199    <a href="/contact-us" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-3 px-6 bg-new-accent_yellow hover:bg-new-accent_yellow_hover text-new-secondary_brown_900 body_1 font-semibold text-center">聯絡我們</a>
1200    <a href="/ai-mental-health-chatbot" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-2 px-6 bg-white border border-new-secondary_brown_300 hover:border-new-secondary_brown_900 text-new-secondary_brown_800">
1201      <img class="h-8 w-auto" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/immediate-help/boon.png" alt="Chat with Boon">
1202      <p class="body_1 font-semibold text-center">與阿本聊天</p>
1203    </a>
1204  </div>
1205
1206  <div class="hidden new_lg:flex new_lg:flex-col space-y-4 new_lg:col-span-3 new_lg:row-span-4 new_lg:order-4 new_lg:row-start-1 new_lg:col-start-10">
1207    <a href="https://www.digital-accessibility.hk/" target="_blank">
1208      <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-app.webp" class="w-40 h-auto" alt="Digital accessibility award - app">
1209    </a>
1210    <a href="https://www.digital-accessibility.hk/" target="_blank">
1211      <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-web.webp" class="w-40 h-auto" alt="Digital accessibility award - web">
1212    </a>
1213  </div>
1214
1215  <p class="col-span-full help_text text-white text-center new_sm:order-6 new_lg:order-7">© 2022-2026 賽馬會心導遊+保留所有權利</p>
1216</footer>
vendor: 143 bytes, lines 1216-1217
1216
1217<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2ed2de0e287741bf6526c024-|49" defer></script>
1217<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"97f77d44729044c0be8b6eda9db33d01","spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1217
1217
1218<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40fbb3bcc9013cd',t:'MTc5MDM5OTEwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1218</body>
1219</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.