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

refine time and state search

Author: iceljc

src/lib/common/RemoteSearchInput.svelte

@@ -17,6 +17,8 @@
 	export let disabled = false;
 	/** @type {boolean} */
 	export let loading = false;
+	/** @type {number} */
+    export let maxLength = 2000;
     /** @type {(query: string) => Promise<string[]>} */
 	export let onSearch = query => Promise.resolve([]);
 
@@ -67,7 +69,7 @@
 		toggle={() => (isOpen = !isOpen)}
 	>
 		<DropdownToggle tag="div">
-			<Input type="text" {value} on:input={handleInput} {disabled} {placeholder} />
+			<Input type="text" {value} on:input={handleInput} maxlength={maxLength} {disabled} {placeholder} />
 		</DropdownToggle>
 		<DropdownMenu class="w-100 thin-scrollbar">
 			{#if loading}

src/lib/helpers/http.js

@@ -37,7 +37,7 @@ axios.interceptors.response.use(
     (error) => {
         loaderStore.set(false);
         const user = getUserStore();
-        console.log('error', error);
+        
         const isExpired = Date.now() / 1000 > user.expires;
         if (isExpired || (error.response && error.response.status === 401)) {
             redirectToLogin();

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

@@ -35,8 +35,29 @@
     max-height: 300px;
 }
 
+.state-search-btn-wrapper {
+    .state-search-btn {
+        display: flex;
+        justify-content: center;
+        gap: 3px;
+        flex-wrap: wrap;
+
+        @media (max-width: 800px) {
+            .search-btn-text {
+                display: none;
+            }
+        }
+    }
+}
+
 .state-search-container {
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    justify-content: flex-end;
+
+    .state-search-item {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+    }
 }

src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte

@@ -3,7 +3,7 @@
     import { Button, Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
     import { _ } from 'svelte-i18n'  
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
-    import { format } from '$lib/helpers/datetime';
+    import { utcToLocal } from '$lib/helpers/datetime';
 	import { AgentType } from '$lib/helpers/enums';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 
@@ -103,7 +103,7 @@
             <h5 class="mt-1 mb-1 div-center">
                 <InPlaceEdit bind:value={agent.name} on:input={handleAgentChange} />
             </h5>
-            <p class="text-muted mb-0">{`Updated at ${format(agent.updated_datetime, 'time')}`}</p>
+            <p class="text-muted mb-0">{`Updated at ${utcToLocal(agent.updated_datetime)}`}</p>
         </div>
     </CardHeader>
     <CardBody>
@@ -270,7 +270,7 @@
                     </tr>
                     <tr>
                         <th class="agent-prop-key">Created Date</th>
-                        <td>{format(agent.created_datetime, 'time')}</td>
+                        <td>{utcToLocal(agent.created_datetime)}</td>
                     </tr>
                 </tbody>
             </Table>

src/routes/page/agent/card-agent.svelte

@@ -1,7 +1,7 @@
 <script>
   import Link from "svelte-link";
   import { Badge, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
-  import { format } from '$lib/helpers/datetime';
+  import { utcToLocal } from '$lib/helpers/datetime';
   import { _ } from 'svelte-i18n';
 	import { LEARNER_ID } from "$lib/helpers/constants";
 	import { AgentExtensions } from "$lib/helpers/utils/agent";
@@ -87,7 +87,7 @@
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1" id="dueDate">
             <i class="bx bx-calendar me-1" />
-            {format(agent.updated_datetime, 'short-date')}
+            {utcToLocal(agent.updated_datetime, 'MMM D, YYYY')}
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1">
             <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>

src/routes/page/conversation/+page.svelte

@@ -20,14 +20,17 @@
 	import { getConversations, deleteConversation, getConversationStateSearchKeys } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { ConversationChannel } from '$lib/helpers/enums';
-	import RemoteSearchInput from '$lib/common/RemoteSearchInput.svelte';
+	import StateSearch from './state-search.svelte';
 
-	let isLoading = false;
-	let isComplete = false;
 	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 15;
 
+	/** @type {boolean} */
+	let isLoading = false;
+	let isComplete = false;
+	let showStateSearch = false;
+
     /** @type {import('$commonTypes').PagedItems<import('$conversationTypes').ConversationModel>} */
     let conversations = { count: 0, items: [] };
 
@@ -69,11 +72,10 @@
 		tags: []
 	};
 
-	/** @type {string} */
-	let stateKey = "";
-
-	/** @type {string | null} */
-	let stateValue = null;
+	/** @type {{key: string, value: string | null}[]} */
+    let states = [
+        { key: '', value: ''}
+    ];
 
     onMount(async () => {
 		isLoading = true;
@@ -214,17 +216,11 @@
 	 * @param {any} e
 	 */
 	function handleConfirmStateModal(e) {
-		if (stateKey) {
-		  searchOption.states = [
-			  {
-				  key: { data: stateKey, isValid: true },
-				  value: { data: stateValue || '', isValid: true },
-				  active_rounds: {data: -1, isValid: true},
-			  }
-			];
-		} else {
-			searchOption.states = [];
-		}
+		searchOption.states = states.filter(x => !!lodash.trim(x.key)).map(x => ({
+			key: { data: x.key, isValid: true },
+			value: { data: x.value || '', isValid: true },
+			active_rounds: {data: -1, isValid: true},
+		}));
 		handleSearchStates();
 		searchConversations(e);
 	}
@@ -251,12 +247,12 @@
 	}
 
 	function getSearchStates() {
-		return searchOption.states?.map(x => {
-			return {
-				key: x.key?.data,
-				value: x.value?.data
-			};
-		}) || [];
+		searchOption.states = states?.filter(x => !!lodash.trim(x.key))?.map(x => ({
+			key: { data: x.key, isValid: true },
+			value: { data: x.value || '', isValid: true },
+			active_rounds: {data: -1, isValid: true},
+		})) || [];
+		return searchOption.states.map(x => ({ key: x.key.data, value: x.value.data }));;
 	}
 
 	function handleSearchStates() {
@@ -358,30 +354,30 @@
 					<div class="mb-0 card-title flex-grow-0">
 						<h5 class="mb-0">{$_('Conversation List')}</h5>
 					</div>
-					<div>
-						<div class="state-search-container">
-							<div>
-								<RemoteSearchInput
-									bind:value={stateKey}
-									onSearch={e => handleStateSearch(e)}
-									placeholder="Search States"
-								/>
-							</div>
-							<div>
-								<Input
-									type="text"
-									bind:value={stateValue}
-									disabled={!stateKey}
-									placeholder="Enter a value"
-								/>
-							</div>
-							<div>
-								<Button color="primary" on:click={handleConfirmStateModal}>Confirm</Button>
+					<div class="state-search-btn-wrapper">
+						<Button
+							color={showStateSearch ? 'secondary' : 'primary'}
+							on:click={() => showStateSearch = !showStateSearch}
+						>
+							<div class="state-search-btn">
+								<div>
+									{#if showStateSearch}
+										<i class="bx bx-hide" />
+									{:else}
+										<i class="bx bx-search-alt" />
+									{/if}
+								</div>
+								<div class="search-btn-text">{'State Search'}</div>
 							</div>
-						</div>
+						</Button>						
 					</div>
 				</div>
 			</CardBody>
+			{#if showStateSearch}
+				<CardBody class="border-bottom" style="display: flex; justify-content: flex-end;">
+					<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
+				</CardBody>
+			{/if}
 			<CardBody class="border-bottom">
 				<Row class="g-3">
 					<Col lg="3">

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

@@ -1,6 +1,6 @@
 <script>
     import { Button, Card, CardBody, CardTitle} from '@sveltestrap/sveltestrap';
-    import { format } from '$lib/helpers/datetime';
+    import { utcToLocal } from '$lib/helpers/datetime';
     import { _ } from 'svelte-i18n'
 
     /** @type {import('$conversationTypes').ConversationModel} */
@@ -12,7 +12,7 @@
         <div class="text-center">
             <!--<img src={adobephotoshop} alt="" height="50" class="mx-auto d-block" />-->
             <h5 class="mt-3 mb-1">{conversation.title}</h5>
-            <p class="text-muted mb-0">{format(conversation.created_time, 'time')}</p>
+            <p class="text-muted mb-0">{utcToLocal(conversation.created_time)}</p>
         </div>
 
         <ul class="list-unstyled mt-4">

src/routes/page/conversation/state-search.svelte

@@ -0,0 +1,81 @@
+<script>
+    import { fly } from 'svelte/transition';
+	import RemoteSearchInput from "$lib/common/RemoteSearchInput.svelte";
+	import { Button, Input } from "@sveltestrap/sveltestrap";
+
+    const limit = 5;
+
+    /** @type {{key: string, value: string | null}[]} */
+    export let states = [];
+
+    /** @type {number} */
+    export let maxLength = 3000;
+
+    /** @type {(e: string) => Promise<string[]>} */
+	export let onSearch = e => Promise.resolve([]);
+
+
+    /** @param {number} idx */
+    function removeState(idx) {
+        states = states.filter((_, index) => index !== idx);
+    }
+
+    function addState() {
+        states = [
+            ...states,
+            { key: '', value: ''}
+        ];
+    }
+</script>
+
+
+<div
+    class="state-search-container"
+    in:fly={{ y: -10, duration: 500 }}
+    out:fly={{ y: -10, duration: 200 }}
+>
+    {#each states as state, idx}
+        <div class="state-search-item">
+            <div>
+                <RemoteSearchInput
+                    bind:value={state.key}
+                    maxLength={maxLength}
+                    onSearch={e => onSearch(e)}
+                    placeholder="Search States"
+                />
+            </div>
+            <div>
+                <Input
+                    type="text"
+                    bind:value={state.value}
+                    maxlength={maxLength}
+                    disabled={!state.key}
+                    placeholder="Enter a value"
+                />
+            </div>
+            <div class="state-delete line-align-center" style="flex: 0 0 13px;">
+                <div>
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <i
+                        class="bx bx-no-entry text-danger clickable"
+                        class:hide={idx === 0}
+                        on:click={() => removeState(idx)}
+                    />
+                </div>
+            </div>
+        </div>
+    {/each}
+    {#if states.length < limit}
+    <div>
+        <Button 
+            color="link"
+            style="padding-left: 0px;"
+            on:click={() => addState()}
+        >
+            Add +
+        </Button>
+    </div>
+    {/if}
+</div>
+