refine rich content files

Author: Jicheng Lu

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

@@ -1,25 +1,27 @@
 <script>
-	import Chat from './chat-box.svelte';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 	import { myInfo } from '$lib/services/auth-service.js';
 	import { getAgent } from '$lib/services/agent-service.js';
-
-	const params = $page.params;
+	import Chat from './chat-box.svelte';
 
 	/** @type {import('$agentTypes').AgentModel} */
-	let agent;
+	let agent = $state(/** @type {any} */ (undefined));
 
 	/** @type {import('$userTypes').UserModel} */
-	let currentUser;
+	let currentUser = $state(/** @type {any} */ (undefined));
 
-    onMount(async () => {
-		currentUser = await myInfo();
+	let agentId = $derived(page.params.agentId);
+
+	$effect(() => {
+		if (agentId) {
+			loadData(agentId);
+		}
+	});
 
-		// get agent profile
-		let agentId = params.agentId;
-		agent = await getAgent(agentId);
-    });
+	async function loadData(/** @type {string} */ id) {
+		currentUser = await myInfo();
+		agent = await getAgent(id);
+	}
 </script>
 
 {#if currentUser}

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte

@@ -1,22 +1,25 @@
 <script>
     import { getContext, onMount } from "svelte";
     import { fade } from 'svelte/transition';
-	import { Card, CardBody } from "@sveltestrap/sveltestrap";
 	import { ElementType } from "$lib/helpers/enums";
-    
-    /** @type {boolean} */
-    export let disabled = false;
 
-    /** @type {any[]} */
-    export let options = [];
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm;
+    /**
+     * @type {{
+     *   disabled?: boolean,
+     *   options?: any[],
+     *   onConfirm?: (args0: string, args1: string) => any
+     * }}
+     */
+    let {
+        disabled = false,
+        options = [],
+        onConfirm
+    } = $props();
 
     /** @type {any[]} */
-    let cards = [];
+    let cards = $state([]);
     /** @type {any[]} */
-    let buttons = [];
+    let buttons = $state([]);
 
     const duration = 1000;
 
@@ -52,7 +55,7 @@
             };
         }) || [];
 
-        buttons = options?.filter(op => !!!op.title && !!!op.subtitle)?.flatMap(op => {
+        buttons = options?.filter(op => !op.title && !op.subtitle)?.flatMap(op => {
             // @ts-ignore
             return op.buttons?.filter(x => !!x.title)?.map(x => {
                 return {
@@ -100,8 +103,8 @@
     <div class="complex-option-container">
         {#each cards as card, idx (idx)}
             <div class="card-element" in:fade={{ duration: duration }}>
-                <Card>
-                    <CardBody class="card-element-body">
+                <div class="card">
+                    <div class="card-body card-element-body">
                         {#if !!card.title}
                             <div class="card-element-title hide-text">{card.title}</div>
                         {/if}
@@ -124,28 +127,28 @@
                                     <button
                                         class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
                                         disabled={disabled}
-                                        on:click={(e) => handleClickOption(e, option)}
+                                        onclick={(e) => handleClickOption(e, option)}
                                     >
                                         <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>{option.title}</span>
                                     </button>
                                 {/each}
                             </div>
                         {/if}
-                    </CardBody>
-                </Card>
+                    </div>
+                </div>
             </div>
         {/each}
     </div>
 {/if}
 
 {#if buttons}
     <div class="plain-option-container center-option" style="margin-top: 5px;">
-        {#each buttons as option, index}
+        {#each buttons as option, index (index)}
             <button
                 class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
                 in:fade={{ duration: duration }}
                 disabled={disabled}
-                on:click={(e) => handleClickOption(e, option)}
+                onclick={(e) => handleClickOption(e, option)}
             >
                 {option.title}
             </button>

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte

@@ -1,6 +1,6 @@
 <script>
-     /** @type {string} */
-     export let content;
+     /** @type {{ content: string }} */
+     let { content } = $props();
 </script>
 
 <div class="msg-disclaimer">

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte

@@ -6,17 +6,20 @@
     import { v4 as uuidv4 } from 'uuid';
 	import LoadingDots from "$lib/common/spinners/LoadingDots.svelte";
 
-    /** @type {import('$conversationTypes').ChatResponseModel?} */
-    export let message;
-
-   /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {string} */
-    export let containerStyles = '';
-
-    /** @type {boolean} */
-	export let scrollable = false;
+    /**
+     * @type {{
+     *   message?: import('$conversationTypes').ChatResponseModel | null,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   scrollable?: boolean
+     * }}
+     */
+    let {
+        message = null,
+        containerClasses = '',
+        containerStyles = '',
+        scrollable = false
+    } = $props();
 
     const scrollbarId = `js-interpreter-scrollbar-${uuidv4()}`;
     const options = {
@@ -32,7 +35,7 @@
 	};
 
     /** @type {boolean} */
-    let isLoading = false;
+    let isLoading = $state(false);
 
     onMount(() => {
         if (scrollable) {

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte

@@ -3,19 +3,22 @@
 	import { RichType } from "$lib/helpers/enums";
 	import RcJsInterpreter from "./rc-js-interpreter.svelte";
 
-    /** @type {import('$conversationTypes').ChatResponseModel?} */
-    export let message;
+    /**
+     * @type {{
+     *   message?: import('$conversationTypes').ChatResponseModel | null,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   markdownClasses?: string
+     * }}
+     */
+    let {
+        message = null,
+        containerClasses = '',
+        containerStyles = '',
+        markdownClasses = ''
+    } = $props();
 
-    /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {string} */
-    export let containerStyles = '';
-
-    /** @type {string} */
-    export let markdownClasses = '';
-
-    $: text = message?.rich_content?.message?.text || message?.text || '';
+    let text = $derived(message?.rich_content?.message?.text || message?.text || '');
 </script>
 
 {#if text}

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte

@@ -2,24 +2,25 @@
 	import { getContext, onMount } from "svelte";
     import { fade } from 'svelte/transition';
     import SveltePlayer from "svelte-player";
-    import { Card, CardBody } from "@sveltestrap/sveltestrap";
     import { ElementType } from "$lib/helpers/enums";
 	import ChatFileUploader from "../chat-util/chat-file-uploader.svelte";
 
-    /** @type {boolean} */
-    export let isMultiSelect = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-    
-    /** @type {any[]} */
-    export let options = [];
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
-
-    /** @type {string} */
-    export let confirmBtnText = 'Continue';
+    /**
+     * @type {{
+     *   isMultiSelect?: boolean,
+     *   disabled?: boolean,
+     *   options?: any[],
+     *   onConfirm?: (args0: string, args1: string) => any,
+     *   confirmBtnText?: string
+     * }}
+     */
+    let {
+        isMultiSelect = false,
+        disabled = false,
+        options = [],
+        confirmBtnText = 'Continue',
+        onConfirm = () => {}
+    } = $props();
 
     const duration = 1000;
     const separator = '|';
@@ -29,15 +30,15 @@
     ];
 
     /** @type {string[]} */
-    let titleAnswers = [];
+    let titleAnswers = $state([]);
     /** @type {string[]} */
-    let payloadAnswers = [];
+    let payloadAnswers = $state([]);
     /** @type {any[]} */
-    let plainOptions = [];
+    let plainOptions = $state([]);
     /** @type {any[]} */
-    let videoOptions = [];
+    let videoOptions = $state([]);
     /** @type {any} */
-    let fileOption;
+    let fileOption = $state(undefined);
 
     const { autoScrollToBottom }  = getContext('chat-window-context');
 
@@ -87,7 +88,7 @@
                     op.isClicked = !op.isClicked;
                     if (op.isClicked) {
                         titleAnswers = [...titleAnswers, op.title];
-                        if (!!op.payload) {
+                        if (op.payload) {
                             payloadAnswers = [...payloadAnswers, op.payload];
                         }
                     } else {
@@ -131,18 +132,18 @@
 
 {#if videoOptions}
 <div class="video-option-container center-option">
-    {#each videoOptions as video, index}
+    {#each videoOptions as video}
         <div class="video-element-card" in:fade={{ duration: duration }}>
-            <Card>
-                <CardBody>
+            <div class="card">
+                <div class="card-body">
                     <div class="video-element-title">
                         {video.title}
                     </div>
                     <div class="video-element-player">
                         <SveltePlayer url={video.payload} controls />
                     </div>
-                </CardBody>
-            </Card>
+                </div>
+            </div>
         </div>
     {/each}
 </div>
@@ -156,7 +157,7 @@
             class:active={!!option.isClicked}
             disabled={disabled}
             in:fade={{ duration: duration }}
-            on:click={(e) => handleClickOption(e, option, index)}
+            onclick={(e) => handleClickOption(e, option, index)}
         >
             <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>
                 {option.title}
@@ -168,8 +169,8 @@
             class="btn btn-outline-success btn-sm m-1"
             name="confirm"
             in:fade={{ duration: duration }}
-            disabled={disabled || plainOptions.every(x => !!!x.isClicked)}
-            on:click={(e) => handleConfirm(e)}
+            disabled={disabled || plainOptions.every(x => !x.isClicked)}
+            onclick={(e) => handleConfirm(e)}
         >
             {confirmBtnText || 'Continue'}
         </button>