Fix/oramasearchbox validations fixes

apps/demo-react/src/App.tsx

@@ -4,8 +4,8 @@ import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router'
 import { CollectionManager } from '@orama/core'
 
 const ORAMACORE_ENDPOINT = 'https://collections.orama.com'
-const ORAMACORE_COLLECTION_ID = 'ncd7zwmirytw1o47dogru4bz'
-const ORAMACORE_READ_API_KEY = 'df00PbXP0dbRUcJgFeFZSNNb7AhsqCw8'
+const ORAMACORE_COLLECTION_ID = 'lnyr5uc7v7bievfrivgvony1'
+const ORAMACORE_READ_API_KEY = 'dyBSIl7O5TEXOZ7KfnNpxCaZ7ZlekZKm'
 
 // Create a CollectionManager instance
 const collectionManager = new CollectionManager({

packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx

@@ -126,6 +126,7 @@ export class OramaChat {
 
   @Store('chat')
   private chatStore: ChatStoreType
+  private isDisconnecting = false;
 
   componentWillLoad() {
     // Initialize placeholder and disclaimer from dictionary if available
@@ -322,30 +323,35 @@ export class OramaChat {
   }
 
   disconnectedCallback() {
-    this.messagesContainerRef?.removeEventListener('wheel', this.handleWheel)
-    this.scrollableContainerResizeObserver?.disconnect()
-    this.nonScrollableContainerResizeObserver?.disconnect()
+    this.isDisconnecting = true;
+    this.messagesContainerRef?.removeEventListener('wheel', this.handleWheel);
+    this.scrollableContainerResizeObserver?.disconnect();
+    this.nonScrollableContainerResizeObserver?.disconnect();
 
     if (this.clearChatOnDisconnect) {
-      this.chatStore.state.interactions = []
+      if (this.chatStore) {
+        if (this.chatStore.state) {
+          this.chatStore.state.interactions = [];
+        }
+      }
     }
   }
 
-  handleSubmit = (e: Event) => {
-    e.preventDefault()
+handleSubmit = (e: Event) => {
+  e.preventDefault()
 
-    if (this.chatStore.state.chatService === null) {
-      throw new Error('Chat Service is not initialized')
-    }
+  if (this.chatStore.state.chatService === null) {
+    throw new Error('Chat Service is not initialized');
+  }
 
-    this.startConversation.emit({ userPrompt: this.inputValue, systemPrompts: this.systemPrompts })
+  this.startConversation.emit({ userPrompt: this.inputValue, systemPrompts: this.systemPrompts });
 
-    this.chatStore.state.chatService.sendQuestion(this.inputValue, this.relatedQueries, this.systemPrompts, {
-      onAnswerGeneratedCallback: (params) => this.answerGenerated.emit(params),
-    })
+  this.chatStore.state.chatService.sendQuestion(this.inputValue, this.relatedQueries, this.systemPrompts, {
+    onAnswerGeneratedCallback: (params) => this.answerGenerated.emit(params),
+  });
 
-    this.chatStore.state.prompt = this.inputValue
-    this.inputValue = ''
+  this.chatStore.state.prompt = this.inputValue;
+  this.inputValue = '';
   }
 
   handleAbortAnswerClick = () => {
@@ -375,11 +381,11 @@ export class OramaChat {
       return false
     }
 
-    return this.messagesContainerRef.scrollHeight > this.messagesContainerRef.clientHeight
+    return this.messagesContainerRef.scrollHeight > this.messagesContainerRef.clientHeight;
   }
 
   render() {
-    const lastInteraction = this.chatStore.state.interactions?.[this.chatStore.state.interactions.length - 1]
+    const lastInteraction = this.chatStore.state.interactions?.[this.chatStore.state.interactions.length - 1];
     const lastInteractionStatus = lastInteraction?.status
     const hasInteractions = this.chatStore.state.interactions?.length > 0
 

packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx

@@ -124,8 +124,11 @@ export class Input {
                 type="button"
                 class="reset-button"
                 onClick={() => {
-                  this.inputRef.focus()
+                  if (this.inputRef) {
+                    this.inputRef.value = ''
+                  }
                   this.inputChanged.emit('')
+                  this.inputRef?.focus()
                 }}
               >
                 <ph-x size={16} />

packages/ui-stencil/src/services/SearchService.ts

@@ -193,19 +193,26 @@ export class SearchService {
 
   private hitToSearchResultParser = (hit: OramaHit, resultMapObject: ResultMapItem): SearchResultWithIcon => {
     function getResultMapValue(resultMapKey: ResultMapKeys): string {
-      const resultMapFunctionOrString = resultMapObject[resultMapKey]
+      if (!hit.document) {
+        return '';
+      }
+
+      const resultMapFunctionOrString = resultMapObject[resultMapKey];
 
       if (!resultMapFunctionOrString) {
-        return hit.document[resultMapKey]
+        const value = hit.document[resultMapKey];
+        return typeof value === 'string' ? value : String(value ?? '');
       }
 
       if (typeof resultMapFunctionOrString === 'function') {
-        const resultMapFunction = resultMapFunctionOrString as ResultMapRenderFunction
-        return resultMapFunction(hit.document, hit.datasource_id)
+        const resultMapFunction = resultMapFunctionOrString as ResultMapRenderFunction;
+        const value = resultMapFunction(hit.document, hit.datasource_id);
+        return typeof value === 'string' ? value : String(value ?? '');
       }
 
-      const resultMapString = resultMapObject[resultMapKey] as string
-      return hit.document[resultMapString]
+      const resultMapString = resultMapFunctionOrString as string;
+      const value = hit.document[resultMapString];
+      return typeof value === 'string' ? value : String(value ?? '');
     }
 
     function getIcon(): string | null {