From 69e417a5e5c777ee170fadaa8257b66cd243866f Mon Sep 17 00:00:00 2001
From: omgate234 <om@videodb.io>
Date: Tue, 23 Sep 2025 18:16:06 +0530
Subject: [PATCH 1/4] feat: dynamic content handling

---
 README.md                                    | 127 ++++++++++++-------
 src/components/chat/ChatInterface.vue        |  14 ++
 src/components/chat/ChatMessage.vue          |   5 +
 src/components/chat/ChatMessageContainer.vue |   9 +-
 src/components/hooks/useVideoDBAgent.js      |  51 ++++++++
 5 files changed, 156 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index 49e9b65..89dc097 100644
--- a/README.md
+++ b/README.md
@@ -69,8 +69,6 @@ If you are using [Director](https://github.com/video-db/Director), make sure it'
 
 ![Structure](https://github.com/user-attachments/assets/3dd8feaa-483a-4f28-bfd2-e8bc23dfffea)
 
-
-
 The `ChatInterface` component is composed of two primary sub-components:
 
 - `<ChatMessageContainer/>`
@@ -100,7 +98,6 @@ _This package includes other UI components that enhance the chat experience_
 
 ![image (1)](https://github.com/user-attachments/assets/f4524358-882b-4563-9d0b-b5c864d46dd4)
 
-
 ### `<Sidebar/>`
 
 This component facilitates navigation between different sessions and collections. It can be used to switch between various conversations or collections.
@@ -117,7 +114,7 @@ This component displays the default screen when there are no conversations in th
 
 These components are used to display collection and video views, helping users better understand the context of the conversation.
 
-# 🧑‍💻 Concepts 
+# 🧑‍💻 Concepts
 
 ### 🔧 Message Handlers
 
@@ -127,44 +124,41 @@ Message handlers are UI components that are used to render the content of a mess
 
 These are the default message handlers that are currently supported by this package:
 
-**Text**:  
----
-  `contentType`: `text`   
-  _Renders the text/markdown of the message_    
-     
+## **Text**:
+
+`contentType`: `text`  
+ _Renders the text/markdown of the message_
+
 ![TextResponse](https://github.com/user-attachments/assets/6e7cb7a8-0f5a-473d-8b46-a104da92922d)
 
-  [View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/TextResponse.vue)
+[View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/TextResponse.vue)
 
-**Video**:  
----
-  `contentType`: `video`  
-  _Renders the video(streaming urls) of  the message_
-     
-  ![chatvideo](https://github.com/user-attachments/assets/e3b07ad3-5258-42c0-9276-49321d840e95)
+## **Video**:
 
+`contentType`: `video`  
+ _Renders the video(streaming urls) of the message_
 
-  [View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ChatVideo.vue)
+![chatvideo](https://github.com/user-attachments/assets/e3b07ad3-5258-42c0-9276-49321d840e95)
+
+[View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ChatVideo.vue)
+
+## **Image**:
+
+`contentType`: `image`  
+ _Renders the image of the message_
 
-**Image**:  
----
-  `contentType`: `image`  
-  _Renders the image of the message_    
-  
 ![ImageHandler](https://github.com/user-attachments/assets/afc02ffb-2704-43ab-8f62-c66e2a0c2178)
 
+[View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ImageHandler.vue)
 
-  [View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ImageHandler.vue)
+## **Search Results**:
 
-**Search Results**:  
----
-  `contentType`: `search_results`  
-  _Renders the search results of the video_ 
-  
-![ChatSearchResults](https://github.com/user-attachments/assets/2192a1c0-def2-4472-9c08-14e08d66f6da)
+`contentType`: `search_results`  
+ _Renders the search results of the video_
 
-  [View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ChatSearchResults.vue)
+![ChatSearchResults](https://github.com/user-attachments/assets/2192a1c0-def2-4472-9c08-14e08d66f6da)
 
+[View implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/ChatSearchResults.vue)
 
 ### 🔧 Custom Message Handler
 
@@ -188,9 +182,43 @@ The `ChatInterface` component exposes a method `registerMessageHandler` accessib
 - `isLastConv`: _Boolean_  
   Indicates if the message is the last conversation.
 
+#### Register via prop: customMessageHandlers
+
+You can also declare handlers declaratively using the `customMessageHandlers` prop on `ChatInterface`.
+
+Schema for each handler item:
+
+- `type`: String → matched against `content.type`
+- `component`: Vue component → rendered when the type matches; receives the same props as built-in handlers
+
+Example:
+
+```html
+<script setup>
+  import { ChatInterface } from "@videodb/chat-vue";
+  import MyCustomHandler from "./MyCustomHandler.vue";
+
+  const socketUrl = "http://127.0.0.1:8000/chat";
+  const httpUrl = "http://127.0.0.1:8000";
+
+  const customMessageHandlers = [
+    { type: "chart", component: MyCustomHandler },
+    // add more handlers here
+  ];
+</script>
+
+<template>
+  <ChatInterface
+    :chat-hook-config="{ socketUrl, httpUrl }"
+    :custom-message-handlers="customMessageHandlers"
+  />
+</template>
+```
+
 **Checkout these resources to understand better:**
 
 - [View default message handlers Implementation](https://github.com/video-db/videodb-chat/blob/main/src/components/message-handlers/)
+
 ### 🔧 Custom ChatHook
 
 ---
@@ -202,8 +230,10 @@ The Custom ChatHook is an advanced feature of this package that allows you to:
 - Control conversation state and manage side effects.
 
 To use a custom hook, pass a function to the `customChatHook` prop. This function should return an object with the following properties:
+
 - `session`: _Object_ (reactive)  
   Session object.
+
   ```js
   {
     isConnected: false,
@@ -255,21 +285,25 @@ To use a custom hook, pass a function to the `customChatHook` prop. This functio
 
 The ChatInterface component accepts the following props:
 
-- `chatInputPlaceholder`: 
+- `chatInputPlaceholder`:
+
   - default: "Ask Speilberg"
   - Customizes the placeholder text for the chat input field.
 
-- `size(string)`: 
-  - default: full  
+- `size(string)`:
+
+  - default: full
   - Determines the size of the chat interface. Options are `full` or `embedded`.
-      Full takes up the entire width of the screen.
-      Embedded takes up space of the parent container.
+    Full takes up the entire width of the screen.
+    Embedded takes up space of the parent container.
+
+- `customChatHook(Function)`:
 
-- `customChatHook(Function)`: 
   - default: [videoDBChatHook](https://github.com/video-db/videodb-chat/blob/main/src/components/hooks/useVideoDBAgent.js)
   - Allows for a custom hook to handle chat functionality.
 
-- `chatHookConfig(object)`: 
+- `chatHookConfig(object)`:
+
   - Configures the chat hook. For the default chat hook, it includes:
   - default
     ```js
@@ -278,8 +312,9 @@ The ChatInterface component accepts the following props:
       debug: false,
     ```
 
-- `sidebarConfig(string)`: 
-  - Customizes the sidebar.  
+- `sidebarConfig(string)`:
+
+  - Customizes the sidebar.
   - default:
     ```js
     {
@@ -293,25 +328,23 @@ The ChatInterface component accepts the following props:
     }
     ```
 
-- `defaultScreenConfig(Object)`: 
-  - default: a list of action cards with default queries  
+- `defaultScreenConfig(Object)`:
+  - default: a list of action cards with default queries
   - Customizes the default screen.
 
 ### Exposed Variables
 
 #### State Variables
 
-- `conversations`: Object  
+- `conversations`: Object
 
 #### Methods
 
-- `addMessage(message)`:   
-    Adds a message to the conversation.
-- `registerMessageHandler(contentType, handler)`:   
+- `addMessage(message)`:  
+   Adds a message to the conversation.
+- `registerMessageHandler(contentType, handler)`:  
   Registers a custom message handler for a specific content type.
 
-
-
 [npm-shield]: https://img.shields.io/npm/v/@videodb/chat-vue?style=for-the-badge
 [npm-url]: https://www.npmjs.com/package/@videodb/chat-vue
 [discord-shield]: https://img.shields.io/badge/dynamic/json?style=for-the-badge&url=https://discord.com/api/invites/py9P639jGz?with_counts=true&query=$.approximate_member_count&logo=discord&logoColor=blue&color=green&label=discord
diff --git a/src/components/chat/ChatInterface.vue b/src/components/chat/ChatInterface.vue
index c90a130..5feeb7a 100644
--- a/src/components/chat/ChatInterface.vue
+++ b/src/components/chat/ChatInterface.vue
@@ -166,6 +166,7 @@
                 :key="key"
                 :conversation="conversations[key]"
                 :search-term="chatInput"
+                :call-api="callApi"
                 :is-static-page="isStaticPage"
                 :is-last-conv="i === Object.keys(conversations).length - 1"
                 class="vdb-c-px-30 vdb-c-transition-all vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-px-60"
@@ -424,6 +425,10 @@ const props = defineProps({
       ],
     }),
   },
+  customMessageHandlers: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits([]);
 
@@ -466,6 +471,7 @@ const {
   deleteVideo,
   deleteAudio,
   deleteImage,
+  callApi,
 } = useChatHook(props.chatHookConfig);
 
 const {
@@ -518,6 +524,14 @@ registerMessageHandler("text", TextResponse);
 registerMessageHandler("search_results", ChatSearchResults);
 registerMessageHandler("image", ImageHandler);
 
+if (Array.isArray(props.customMessageHandlers)) {
+  for (const handler of props.customMessageHandlers) {
+    if (handler && typeof handler.type === "string" && handler.component) {
+      registerMessageHandler(handler.type, handler.component);
+    }
+  }
+}
+
 const isStaticPage = ref(false);
 const chatWindowRef = ref(null);
 const headerRef = ref(null);
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 090969c..6f8b79c 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -48,6 +48,7 @@
               :search-term="searchTerm"
               :conv-id="message.conv_id"
               :msg-id="message.msg_id"
+              :call-api="callApi"
             />
           </div>
         </div>
@@ -69,6 +70,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  callApi: {
+    type: Function,
+    default: null,
+  },
   isStaticPage: {
     type: Boolean,
     default: false,
diff --git a/src/components/chat/ChatMessageContainer.vue b/src/components/chat/ChatMessageContainer.vue
index 6b46b15..45776d6 100644
--- a/src/components/chat/ChatMessageContainer.vue
+++ b/src/components/chat/ChatMessageContainer.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="vdb-c-relative vdb-c-h-auto vdb-c-w-full"
-  >
+  <div class="vdb-c-relative vdb-c-h-auto vdb-c-w-full">
     <div
       v-for="(message, i) in messages"
       :key="message.msg_id"
@@ -15,6 +13,7 @@
         :current-index="i"
         :message-loading="messageLoading"
         :search-term="searchTerm"
+        :call-api="callApi"
       />
     </div>
   </div>
@@ -29,6 +28,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  callApi: {
+    type: Function,
+    default: null,
+  },
   isStaticPage: {
     type: Boolean,
     default: false,
diff --git a/src/components/hooks/useVideoDBAgent.js b/src/components/hooks/useVideoDBAgent.js
index 4a4603b..24bafc5 100644
--- a/src/components/hooks/useVideoDBAgent.js
+++ b/src/components/hooks/useVideoDBAgent.js
@@ -19,11 +19,61 @@ const fetchData = async (rootUrl, endpoint) => {
   return res;
 };
 
+const apiRequest = async (rootUrl, endpoint, options = {}) => {
+  const {
+    method = "GET",
+    payload = null,
+    headers: customHeaders = {},
+    responseType = "json",
+  } = options;
+
+  const res = {};
+  try {
+    const init = { method, headers: { ...customHeaders } };
+
+    if (payload instanceof FormData) {
+      init.body = payload;
+      // Let the browser set the correct multipart/form-data headers
+    } else if (payload !== null && payload !== undefined) {
+      init.headers = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        ...customHeaders,
+      };
+      init.body = JSON.stringify(payload);
+    }
+
+    const response = await fetch(`${rootUrl}${endpoint}`, init);
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    let data;
+    if (responseType === "text") {
+      data = await response.text();
+    } else if (responseType === "blob") {
+      data = await response.blob();
+    } else {
+      data = await response.json();
+    }
+
+    res.status = "success";
+    res.data = data;
+  } catch (error) {
+    res.status = "error";
+    res.error = error;
+  }
+  return res;
+};
+
 export function useVideoDBAgent(config) {
   const { debug = false, socketUrl, httpUrl } = config;
   if (debug) console.log("debug :videodb-chat config", config);
   const socket = io(socketUrl);
 
+  const callApi = (endpoint, options = {}) =>
+    apiRequest(httpUrl, endpoint, options);
+
   const session = reactive({
     isConnected: false,
     sessionId: null,
@@ -638,5 +688,6 @@ export function useVideoDBAgent(config) {
     uploadMedia,
     generateImageUrl,
     generateAudioUrl,
+    callApi,
   };
 }

From 8ad2739762fafef34c9ce1bfee50b68fcab448c5 Mon Sep 17 00:00:00 2001
From: omgate234 <om@videodb.io>
Date: Tue, 23 Sep 2025 18:19:00 +0530
Subject: [PATCH 2/4] feat: prop details

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 89dc097..5ac69e9 100644
--- a/README.md
+++ b/README.md
@@ -176,11 +176,13 @@ The `ChatInterface` component exposes a method `registerMessageHandler` accessib
 
 **The handler component will receive the following props:**
 
-- `content`: _Object_  
-  The content object of matched content type.
-
-- `isLastConv`: _Boolean_  
-  Indicates if the message is the last conversation.
+- `content` (Object): The matched content object for this type
+- `isLastConv` (Boolean): Whether this message is in the last conversation block
+- `isUser` (Boolean): Whether the message is authored by the user
+- `searchTerm` (String): Current chat search term (if any)
+- `convId` (String): Conversation ID for this message
+- `msgId` (String): Message ID for this message
+- `callApi` (Function): Helper for calling backend endpoints bound to `httpUrl`
 
 #### Register via prop: customMessageHandlers
 

From c598cf0320606c263847155f093b37eaf0a0c697 Mon Sep 17 00:00:00 2001
From: omgate234 <om@videodb.io>
Date: Thu, 25 Sep 2025 16:53:52 +0530
Subject: [PATCH 3/4] feat: `addMessage` as a prop

---
 src/components/chat/ChatInterface.vue        | 1 +
 src/components/chat/ChatMessage.vue          | 5 +++++
 src/components/chat/ChatMessageContainer.vue | 5 +++++
 3 files changed, 11 insertions(+)

diff --git a/src/components/chat/ChatInterface.vue b/src/components/chat/ChatInterface.vue
index 5feeb7a..7c6535d 100644
--- a/src/components/chat/ChatInterface.vue
+++ b/src/components/chat/ChatInterface.vue
@@ -167,6 +167,7 @@
                 :conversation="conversations[key]"
                 :search-term="chatInput"
                 :call-api="callApi"
+                :add-message="addMessage"
                 :is-static-page="isStaticPage"
                 :is-last-conv="i === Object.keys(conversations).length - 1"
                 class="vdb-c-px-30 vdb-c-transition-all vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-px-60"
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 6f8b79c..2ca3ea5 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -49,6 +49,7 @@
               :conv-id="message.conv_id"
               :msg-id="message.msg_id"
               :call-api="callApi"
+              :add-message="addMessage"
             />
           </div>
         </div>
@@ -74,6 +75,10 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  addMessage: {
+    type: Function,
+    default: null,
+  },
   isStaticPage: {
     type: Boolean,
     default: false,
diff --git a/src/components/chat/ChatMessageContainer.vue b/src/components/chat/ChatMessageContainer.vue
index 45776d6..f55a0e1 100644
--- a/src/components/chat/ChatMessageContainer.vue
+++ b/src/components/chat/ChatMessageContainer.vue
@@ -14,6 +14,7 @@
         :message-loading="messageLoading"
         :search-term="searchTerm"
         :call-api="callApi"
+        :add-message="addMessage"
       />
     </div>
   </div>
@@ -32,6 +33,10 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  addMessage: {
+    type: Function,
+    default: null,
+  },
   isStaticPage: {
     type: Boolean,
     default: false,

From b8fe4d5d91d4225122b1d3e32ccc70f46b5a99fc Mon Sep 17 00:00:00 2001
From: omgate234 <om@videodb.io>
Date: Sun, 26 Oct 2025 22:07:50 +0530
Subject: [PATCH 4/4] feat: prepare script for git download

Signed-off-by: omgate234 <om@videodb.io>
---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1fd826..f02e6d9 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
     "lint": "eslint 'src/**/*.{ts,vue}'",
     "test": "vitest",
     "test-ci": "vitest --run",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
     "vue": "^3.0.4"