Merge pull request #182 from iceljc/features/refine-chat-window

Features/refine chat window

src/lib/common/LoadingDots.svelte

@@ -1,29 +1,41 @@
 <script>
-	import { range } from "$lib/helpers/utils/common";
+	import { durationUnitRegex, range } from "$lib/helpers/utils/common";
 
     /** @type {string} */
 	export let color = '#FF3E00';
+
     /** @type {string} */
 	export let unit = 'px';
+
     /** @type {string} */
 	export let duration = '1.5s';
+
 	/** @type {string | number} */
 	export let size = '60';
+
     /** @type {boolean} */
 	export let pause = false;
+
     /** @type {'dot' | 'cube'} */
     export let shape = 'dot';
+
     /** @type {number} */
     export let count = 3;
+
     /** @type {string | number} */
 	export let gap = '10';
 
-    const unitRegex = /[a-zA-Z]/;
-    const durationUnit = duration.match(unitRegex)?.[0] ?? 's';
-	const durationNum = duration.replace(unitRegex, '');
+	/** @type {string} */
+	export let containerClasses = '';
+	
+	/** @type {string} */
+	export let containerStyles = '';
+
+    const durationUnit = duration.match(durationUnitRegex)?.[0] ?? 's';
+	const durationNum = duration.replace(durationUnitRegex, '');
 </script>
 
-<div class="loading-wrapper" style="--size: {size}{unit}; --color: {color}; --duration: {duration}; --count: {count}; --gap: {gap}{unit}">
+<div class={`loading-wrapper ${containerClasses}`} style="--size: {size}{unit}; --color: {color}; --duration: {duration}; --count: {count}; --gap: {gap}{unit};  {containerStyles}">
 	{#each range(count, 0) as version}
 		<div
 			class={`animation ${shape === 'cube' ? 'cube' : 'dot'}`}

src/lib/common/Stretch.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { range, durationUnitRegex } from "$lib/helpers/utils/common";
+
+  /** @type {string} */
+	export let color = '#FF3E00';
+
+  /** @type {string} */
+	export let unit = 'px';
+
+  /** @type {string} */
+	export let duration = '1.2s';
+
+  /** @type {string | number} */
+	export let size = '60';
+
+  /** @type {boolean} */
+	export let pause = false;
+
+  /** @type {string | number} */
+  export let gap = '5';
+
+  /** @type {string} */
+  export let containerClasses = '';
+
+  /** @type {string} */
+  export let containerStyles = '';
+
+  /** @type {string} */
+	let durationUnit = duration.match(durationUnitRegex)?.[0] ?? 's';
+
+  /** @type {string} */
+	let durationNum = duration.replace(durationUnitRegex, '');
+</script>
+
+<div class={`stretch-wrapper ${containerClasses}`} style={`--size: ${size}${unit}; --color: ${color}; --duration: ${duration}; --gap: ${gap}${unit}; ${containerStyles}`}>
+	{#each range(5, 1) as version}
+		<div
+			class="rect"
+			class:pause-animation={pause}
+			style="animation-delay: {(version - 1) * (+durationNum / 12)}{durationUnit}"
+		/>
+	{/each}
+</div>
+
+<style>
+	.stretch-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+		height: calc(var(--size));
+    gap: var(--gap);
+    margin-top: calc(var(--size) * 3);
+    margin-bottom: calc(var(--size) * 3);
+	}
+	.rect {
+    width: calc(var(--size) / 1.2);
+		height: calc(var(--size) * 5);
+		display: inline-block;
+		transform: scaleY(0.2);
+		background-color: var(--color);
+		animation: stretch var(--duration) ease-in-out infinite;
+	}
+
+	.pause-animation {
+		animation-play-state: paused;
+	}
+
+	@keyframes stretch {
+		0%,
+		40%,
+		100% {
+			transform: scaleY(0.3);
+		}
+		20% {
+			transform: scaleY(1);
+		}
+	}
+</style>

src/lib/common/audio-player/AudioPlayer.svelte

@@ -1,14 +1,14 @@
 <script>
   import {
-    initPlayer,
+    initAudio,
     stopAll,
     clearAudioInstantce,
     useAudioStore
   } from "./store";
   import { volumeEventHandlers, progressEventHandlers } from "./handlers";
   import { onDestroy, onMount, createEventDispatcher } from "svelte";
   import { propsBool } from "./utils";
-  import { get_current_component } from "svelte/internal";
+  import { v4 as uuidv4 } from 'uuid';
 
   import {
     soundUnmuted,
@@ -21,7 +21,6 @@
     loopNone,
   } from "./svg";
 
-  const component = get_current_component();
   const svelteDispatch = createEventDispatcher();
 
   /**
@@ -30,7 +29,6 @@
    */
   function dispatch(name, detail = null) {
     svelteDispatch(name, detail);
-    component.dispatchEvent && component.dispatchEvent(new CustomEvent(name, !!detail ? { detail } : undefined));
   };
 
   const {
@@ -48,7 +46,7 @@
   export let audio;
 
   /** @type {string} */
-  export let id;
+  export let id = uuidv4();
 
   /** @type {"list" | "random"} */
   export let order = 'list';
@@ -185,13 +183,14 @@
   });
 
   onDestroy(() => {
-    dispatch("destroy");
     clearAudioInstantce(id);
+    dispatch("destroy");
   });
 
   const init = () => {
     const audioPlayer = document.createElement("audio");
-    initPlayer({ id: id, player: audioPlayer }, dispatch);
+    id = id || uuidv4();
+    initAudio({ id: id, player: audioPlayer }, dispatch);
     isShowList = !propsBool($$props, "list_folded") && $audioList.length > 1;
     volume = Math.max(volume, 0);
     volume = Math.min(volume, 1);

src/lib/common/audio-player/AudioSpeaker.svelte

@@ -1,12 +1,14 @@
 <script>
 	import { initSpeech, stopAll, clearSpeakerInstantce } from "$lib/common/audio-player/store";
 	import { onMount, onDestroy } from "svelte";
+  import { v4 as uuidv4 } from 'uuid';
+	import Stretch from "../Stretch.svelte";
 
   /** @type {string} */
   export let text;
 
   /** @type {string} */
-  export let id;
+  export let id = uuidv4();
 
   /** @type {boolean} */
   export let mutex = true;
@@ -31,6 +33,7 @@
     utterThis.pitch = 1;
     utterThis.rate = 1;
     utterThis.onend = (e) => { stop(); };
+    id = id || uuidv4();
 
     speech = {
       id: id,
@@ -84,11 +87,11 @@
   class="{disableDefaultStyles ? '' : 'chat-speaker-container'} {containerClasses}"
   style={`${containerStyles}`}
 >
-  <span on:click={() => speak()}>
+  <span style="display: inline-block;" on:click={() => speak()}>
     {#if !speaking}
-      <i class="bx bx-volume" />
-    {:else}
       <i class="bx bx-volume-full" />
+    {:else}
+      <Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
     {/if}
   </span>
 </div>

src/lib/common/audio-player/store.js

@@ -12,7 +12,7 @@ export const speechInstances = [];
  * @param {import('$types').AudioModel} audio
  * @param {(name: string, detail?: any) => void} dispatch
  */
-export function initPlayer(audio, dispatch) {
+export function initAudio(audio, dispatch) {
   audioInstances.push(audio);
   bindAudioEvent(audio.player, dispatch);
 }

src/lib/helpers/utils/common.js

@@ -2,6 +2,8 @@ export function range(size = 3, startAt = 0) {
     return [...Array(size).keys()].map((i) => i + startAt);
 };
 
+export const durationUnitRegex = /[a-zA-Z]/;
+
 /**
  * @param {string} baseUrl
  * @param {string} relativePath

src/lib/scss/custom/components/_audio.scss

@@ -341,6 +341,7 @@
 
 .chat-speaker-container {
     font-size: 20px;
+    height: 30px;
     color: var(--bs-primary);
     span {
         cursor: pointer;

src/lib/scss/custom/pages/_conversation.scss

@@ -11,4 +11,12 @@
 
 .conv-state-search-menu {
     inset: auto 0px auto auto !important;
+}
+
+.text-collapse {
+    overflow-y: hidden;
+    height: fit-content;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
 }

src/routes/chat/[agentId]/[conversationId]/chat-util/chat-image-uploader.svelte

@@ -20,6 +20,7 @@
     let fileUploadLimit = 0;
 
     const fileUpperLimit = 5;
+    const fileMaxSize = 10 * 1024 * 1024;
     const accept = "image/*,.pdf,.xlsx,.xls,.csv,.wav,.mp3";
 
     const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
@@ -57,6 +58,7 @@
                 noDrag
                 disabled={disableFileDrop}
                 fileLimit={fileUploadLimit}
+                maxSize={fileMaxSize}
                 on:drop={e => handleFileDrop(e)}
             >
                 <slot>

src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte

@@ -33,7 +33,7 @@
         }
     }
 
-     /** @param {any} e */
+    /** @param {any} e */
     function toggleText(e) {
         e.preventDefault();
         is_collapsed = !is_collapsed;

src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte

@@ -0,0 +1,34 @@
+<script>
+	import Markdown from '$lib/common/Markdown.svelte';
+	import { Button } from '@sveltestrap/sveltestrap';
+
+  /** @type {import('$types').ChatResponseModel} */
+  export let dialog;
+
+  let is_collapsed = true;
+
+  /** @param {any} e */
+  function toggleText(e) {
+    e.preventDefault();
+    is_collapsed = !is_collapsed;
+  }
+</script>
+
+<div
+  class="fw-bold"
+  class:text-collapse={!!is_collapsed}
+>
+  <Markdown
+    containerClasses={'text-primary'}
+    text={dialog?.rich_content?.message?.text || dialog?.text}
+  />
+</div>
+
+<Button
+  class='toggle-btn btn-sm text-secondary'
+  color="link"
+  style={'padding-left: 0px;'}
+  on:click={(e) => toggleText(e)}
+>
+  {`${is_collapsed ? 'More +' : 'Less -'}`}
+</Button>

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -1,14 +1,14 @@
 <script>
+    import { onMount } from 'svelte';
+    import { _ } from 'svelte-i18n'  
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
     import Link from 'svelte-link/src/Link.svelte';
     import { GetDialogs, getConversationFiles } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
-    import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n'  
 	import { USER_SENDERS } from '$lib/helpers/constants';
-	import Markdown from '$lib/common/Markdown.svelte';
 	import MessageFileGallery from '$lib/common/MessageFileGallery.svelte';
 	import { FileSourceType } from '$lib/helpers/enums';
+	import ConvDialogElement from './conv-dialog-element.svelte';
 
     /** @type {import('$types').ChatResponseModel[]} */
     let dialogs = [];
@@ -66,9 +66,7 @@
                                 <span class="text-muted ms-2" style="font-size: 0.7rem;">{utcToLocal(dialog.created_at)}</span>
                             </div>
                             <div>
-                                <p class="fw-bold">
-                                    <Markdown text={dialog?.rich_content?.message?.text || dialog?.text} containerClasses={'text-primary'} />
-                                </p>
+                                <ConvDialogElement dialog={dialog} />
                                 {#if !!dialog.has_message_files}
                                     <MessageFileGallery
                                         messageId={dialog?.message_id}

src/routes/page/user/me/+page.svelte

@@ -15,6 +15,8 @@
 	let currentUser;
 	let isLoading = false;
 
+	const fileMaxSize = 10 * 1024 * 1024;
+
 	onMount(async () => {
 		isLoading = true;
 		await myInfo()
@@ -68,6 +70,7 @@
 								noDrag
 								multiple={false}
 								fileLimit={1}
+								maxSize={fileMaxSize}
 								on:drop={e => handleFileDrop(e)}
 							>
 								<img