refine chat utils

Author: Jicheng Lu

src/routes/chat/+page.svelte

@@ -1,29 +1,28 @@
 <script>
     import { onMount } from 'svelte';
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { getSettingDetail } from '$lib/services/setting-service';
-    import { getAgents } from '$lib/services/agent-service.js'
+    import { getAgents } from '$lib/services/agent-service.js';
 
     /** @type {import('$agentTypes').AgentFilter} */
     const filter = {
         pager: { page: 1, size: 10, count: 0 }
     };
 
     /** @type {import('$agentTypes').AgentModel[]} */
-    let agents = [];
-    let agentId = 'undefined';
+    let agents = $state([]);
+    let agentId = $state('undefined');
 
-	onMount(async () => {
+    onMount(async () => {
         const response = await getAgents(filter, true);
         agents = response?.items?.map(t => { return { ...t }; }) || [];
         const agentSettings = await getSettingDetail("Agent");
         // @ts-ignore
         agentId = agentSettings.hostAgentId;
-	});
+    });
 </script>
 
-<Container fluid>
-    <Row>
+<div class="container-fluid">
+    <div class="row">
         <div class="col-12">
             <div style="margin-top: 10vh; margin-left:10vw;">
                 {#each agents as agent}
@@ -34,27 +33,27 @@
                         name="agents"
                         id={agent.id}
                         value={agent.id}
-                        checked = {agentId == agent.id}
-                        on:click={() => agentId = agent.id}
+                        checked={agentId == agent.id}
+                        onclick={() => agentId = agent.id}
                     />
                     <label class="form-check-label" for={agent.id}>
                         {agent.name}
-                    </label>  
+                    </label>
                     <div class="mx-4">{agent.description}</div>
                 </div>
                 {/each}
-            </div>    
+            </div>
         </div>
-    </Row>
-    <Row class="text-center">
-        <Col>
+    </div>
+    <div class="row text-center">
+        <div class="col">
             <p class="section-subtitle text-muted text-center pt-4 font-secondary">Select a bot you want to start chatting with and click the Start button.</p>
             <div class="d-flex justify-content-center">
                 <a href="chat/{agentId}" class="btn btn-primary">
                     <i class="mdi mdi-chat"></i>
                     <span>Start Conversation</span>
                 </a>
             </div>
-        </Col>
-    </Row>
-</Container>
+        </div>
+    </div>
+</div>

src/routes/chat/[agentId]/+page.svelte

@@ -1,40 +1,37 @@
 <script>
     // This page is used to initialize a new conversation for client
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
-    import { getToken, setToken } from '$lib/services/auth-service.js'
+    import { getToken, setToken } from '$lib/services/auth-service.js';
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
+    import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
-    const params = $page.params;
-    
     /** @type {import('$conversationTypes').ConversationModel} */
-    let conversation;
-    let conversationId = "undefined";
+    let conversation = $state(/** @type {any} */ (undefined));
+    let conversationId = $state('undefined');
 
-    let agentId = params.agentId;
+    let agentId = $derived(page.params.agentId);
 
     onMount(async () => {
         let user = getUserStore();
-        if ($page.url.searchParams.has('token')) {
-            let token = $page.url.searchParams.get('token');
+        if (page.url.searchParams.has('token')) {
+            let token = page.url.searchParams.get('token');
             console.log("login as explicit token in query.");
-            await setToken(token);
+            await setToken(token || '');
         } else if (user.token) {
             console.log("login as existing account.");
         } else {
-            await getToken("guest@gmail.com", "123456", () => {
+            await getToken("guest@gmail.com", "123456", '', () => {
                 console.log("login as guest.");
             }, () => {});
         }
 
         conversation = conversationStore.get();
         if (!conversation.id || agentId != conversation.agent_id) {
-            // new conversation
+            // @ts-ignore
             conversation = await newConversation(agentId);
             conversationStore.put(conversation);
         }
@@ -53,14 +50,14 @@
     });
 </script>
 
-<Container fluid>
-    <Row class="text-center">
-        <Col style="padding: 50px;">
+<div class="container-fluid">
+    <div class="row text-center">
+        <div class="col" style="padding: 50px;">
             <div class="spinner-grow text-primary m-1" role="status" style="padding: 50px;">
                 <span class="sr-only">Loading...</span>
             </div>
             <h3>Initializing a conversation, wait a moment please...</h3>
             <a href={`chat/${agentId}/${conversationId}`}>Click here if the browser doesn't redirect correctly.</a>
-        </Col>
-    </Row>
-</Container>
+        </div>
+    </div>
+</div>

src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte

@@ -1,17 +1,21 @@
 <script>
 	import { directToAgentPage } from '$lib/helpers/utils/common';
 
-    /** @type {import('$agentTypes').AgentModel} */
-	export let agent;
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel
+     * }}
+     */
+	let { agent } = $props();
 </script>
 
 <div>
     <div class="chat-agent-row">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <h3
             class="text-primary fw-bold"
-            on:click={() => directToAgentPage(agent?.id)}
+            onclick={() => directToAgentPage(agent?.id)}
         >
             <span class="clickable">{agent?.name || ''}</span>
         </h3>
@@ -23,7 +27,7 @@
     </div>
     <div class="chat-agent-row">
         <div>
-            <span>{agent?.llm_config?.provider || ''}{!!agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
+            <span>{agent?.llm_config?.provider || ''}{agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
         </div>
     </div>
     <div class="chat-agent-row">

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -2133,10 +2133,10 @@
 									<div class="chat-util-links">
 										<ChatBigMessage
 											disabled={isSendingMsg || isThinking || disableAction}
-											on:click={() => toggleBigMessageModal()}
+											onclick={() => toggleBigMessageModal()}
 										/>
 										{#if PUBLIC_LIVECHAT_FILES_ENABLED === 'true'}
-											<ChatUtil disabled={disableAction} on:click={() => loadChatUtils = true} />
+											<ChatUtil disabled={disableAction} onclick={() => loadChatUtils = true} />
 										{/if}
 									</div>
 								</div>

src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte

@@ -1,43 +1,46 @@
 <script>
-    import { onDestroy, onMount } from "svelte";
+    import { onMount } from "svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
 
-    /** @type {any[] | undefined} */
-    export let options;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
+    /**
+     * @type {{
+     *   options?: any[],
+     *   disabled?: boolean,
+     *   onConfirm?: (title: string, payload: string) => any
+     * }}
+     */
+    let {
+        options,
+        disabled = false,
+        onConfirm = () => {}
+    } = $props();
 
     /** @type {any[]} */
-    let files = [];
+    let files = $state([]);
     /** @type {any} */
-    let confirmOption;
+    let confirmOption = $state(undefined);
     /** @type {any} */
-    let cancelOption;
+    let cancelOption = $state(undefined);
 
-    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
-        const savedAttachments = $conversationUserAttachmentStore;
-        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments?.accepted_files || [];
+    $effect(() => {
+        const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+            files = value?.accepted_files || [];
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 
     onMount(() => {
         collectOptions(options);
-        
-    });
-
-    onDestroy(() => {
-        unsubscribe();
     });
 
+    /** @param {any[] | undefined} opts */
+    function collectOptions(opts) {
+        confirmOption = opts?.find(op => op.title?.toLowerCase()?.startsWith("yes"));
+        cancelOption = opts?.find(op => op.title?.toLowerCase()?.startsWith("no"));
 
-    /** @param {any[] | undefined} options */
-    function collectOptions(options) {
-        confirmOption = options?.find(op => op.title?.toLowerCase()?.startsWith("yes"));
-        cancelOption = options?.find(op => op.title?.toLowerCase()?.startsWith("no"));
-        
         if (!confirmOption) {
             confirmOption = {
                 title: 'Yes, I have uploaded attachments.',
@@ -66,8 +69,8 @@
 	 * @param {string} title
      * @param {string} payload
 	 */
-     function innerConfirm(title, payload) {
-        onConfirm && onConfirm(title, payload);
+    function innerConfirm(title, payload) {
+        onConfirm?.(title, payload);
     }
 </script>
 
@@ -76,7 +79,7 @@
         <button
             class={`btn btn-sm m-1 ${confirmOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             disabled={disabled}
-            on:click={(e) => handleClickOption(e, confirmOption)}
+            onclick={(e) => handleClickOption(e, confirmOption)}
         >
             {confirmOption?.title}
         </button>
@@ -85,7 +88,7 @@
         <button
             class={`btn btn-sm m-1 ${cancelOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             disabled={disabled}
-            on:click={(e) => handleClickOption(e, cancelOption)}
+            onclick={(e) => handleClickOption(e, cancelOption)}
         >
             {cancelOption?.title}
         </button>

src/routes/chat/[agentId]/[conversationId]/chat-util/chat-big-message.svelte

@@ -1,25 +1,26 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disableDefaultStyles?: boolean,
+     *   disabled?: boolean,
+     *   onclick?: () => void
+     * }}
+     */
+    let {
+        containerClasses = '',
+        containerStyles = '',
+        disableDefaultStyles = false,
+        disabled = false,
+        onclick
+    } = $props();
 
     function clickIcon() {
         if (disabled) {
             return;
         }
-        svelteDispatch("click")
+        onclick?.();
     }
 </script>
 
@@ -30,15 +31,15 @@
     <ul class="list-inline mb-0">
         <li class="list-inline-item">
             <span>
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <i
                     class="bx bx-pencil clickable"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Zoom in"
-                    on:click={() => clickIcon()}
-                />
+                    onclick={() => clickIcon()}
+                ></i>
             </span>
         </li>
     </ul>