add video component

Author: Jicheng Lu

package-lock.json

@@ -63,6 +63,7 @@
 		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^0.21.1",
 		"svelte-link": "^1.4.0",
+		"svelte-player": "^0.0.21",
 		"svelte-select": "^5.7.0",
 		"svelte-splitpanes": "^0.8.0",
 		"svelte-viewport-info": "^1.0.1",

package.json

@@ -24,6 +24,12 @@ const richType = {
 }
 export const RichType = Object.freeze(richType);
 
+const elementType = {
+    Text: "text",
+    Video: "video"
+};
+export const ElementType = Object.freeze(elementType);
+
 const contentLogSource = {
     UserInput: "user input",
     Prompt: "prompt",

src/lib/helpers/enums.js

@@ -169,6 +169,44 @@
             flex-direction: column;
             width: 80%;
 
+            .video-group-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 5px;
+
+                .video-element-card {
+                    border: none;
+                    box-shadow: none;
+                    flex: 1 1 400px;
+
+                    .card-body {
+                        padding: 0 !important;
+                    }
+
+                    .video-element-title {
+                        font-size: 1.1em;
+                        font-weight: 700;
+                        padding-left: 5px;
+                        padding-top: 10px;
+                        padding-bottom: 10px;
+                        margin-bottom: 5px;
+                        width: 100%;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .video-element-player {
+                        aspect-ratio: 16 / 9;
+
+                        video, iframe {
+                            border-radius: 10px;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+
             .button-group-container {
                 display: flex;
                 flex-wrap: wrap;

src/lib/scss/custom/pages/_chat.scss

@@ -940,7 +940,7 @@
 								<button
 									type="submit"
 									class="btn btn-primary btn-rounded waves-effect waves-light"
-									disabled={isSendingMsg || isThinking}
+									disabled={isSendingMsg || isThinking || lastBotMsg?.rich_content?.editor == EditorType.None}
 									on:click={startListen}
 								>
 									<i class="mdi mdi-{microphoneIcon} md-36" />
@@ -951,7 +951,7 @@
 									<ChatTextArea
 										className={'chat-input'}
 										bind:text={text}
-										disabled={isSendingMsg || isThinking}
+										disabled={isSendingMsg || isThinking || lastBotMsg?.rich_content?.editor == EditorType.None}
 										editor={lastBotMsg?.rich_content?.editor || ''}
 										onKeyDown={e => onSendMessage(e)}
 									/>

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

@@ -1,5 +1,8 @@
 <script>
 	import { onMount } from "svelte";
+    import SveltePlayer from "svelte-player";
+    import { Card, CardBody } from "@sveltestrap/sveltestrap";
+    import { ElementType } from "$lib/helpers/enums";
 
     /** @type {boolean} */
     export let isMultiSelect = false;
@@ -23,24 +26,29 @@
     /** @type {string[]} */
     let payloadAnswers = [];
     /** @type {any[]} */
-    let localOptions = [];
+    let plainOptions = [];
+    /** @type {any[]} */
+    let videoOptions = [];
 
     onMount(() => {
         reset();
-        localOptions = collectOptions(options);
+        collectOptions(options);
     });
 
     /** @param {any[]} options */
     function collectOptions(options) {
-        const res = options?.filter(op => !!op.title && !!op.payload)?.map(op => {
+        const innerOptions = options?.filter(op => !!op.title && !!op.payload) || [];
+
+        videoOptions = innerOptions?.filter(op => op.type == ElementType.Video);
+        plainOptions = innerOptions?.filter(op => op.type != ElementType.Video)?.map(op => {
             return {
                 title: op.title,
                 payload: op.payload,
+                is_primary: op.is_primary,
+                is_secondary: op.is_secondary,
                 isClicked: false
             };
         }) || [];
-
-        return res;
     }
 
     /**
@@ -54,7 +62,7 @@
         if (!isMultiSelect) {
             innerConfirm(option?.title, option?.payload);
         } else {
-            localOptions = localOptions.map((op, idx) => {
+            plainOptions = plainOptions.map((op, idx) => {
                 if (idx === index) {
                     op.isClicked = !op.isClicked;
                     if (op.isClicked) {
@@ -91,18 +99,38 @@
     }
 
     function reset() {
-        localOptions = [];
+        plainOptions = [];
+        videoOptions = [];
         titleAnswers = [];
         payloadAnswers = [];
     }
 
 </script>
 
-{#if localOptions.length > 0}
+{#if videoOptions.length > 0}
+<div>
+    <div class="video-group-container">
+        {#each videoOptions as video, index}
+            <Card class="video-element-card">
+                <CardBody>
+                    <div class="video-element-title">
+                        {video.title}
+                    </div>
+                    <div class="video-element-player">
+                        <SveltePlayer url={video.payload} controls />
+                    </div>
+                </CardBody>
+            </Card>
+        {/each}
+    </div>
+</div>
+{/if}
+
+{#if plainOptions.length > 0}
 <div class="button-group-container">
-    {#each localOptions as option, index}
+    {#each plainOptions as option, index}
         <button
-            class="btn btn-outline-primary btn-rounded btn-sm m-1"
+            class={`btn btn-rounded btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             class:active={!!option.isClicked}
             disabled={disableOption}
             on:click={(e) => handleClickOption(e, option, index)}
@@ -114,7 +142,7 @@
         <button
             class="btn btn-outline-success btn-rounded btn-sm m-1"
             name="confirm"
-            disabled={disableOption || localOptions.every(x => !!!x.isClicked)}
+            disabled={disableOption || plainOptions.every(x => !!!x.isClicked)}
             on:click={(e) => handleConfirm(e)}
         >
             {confirmBtnText || 'Continue'}