Rohit/update name

README.md

@@ -14,7 +14,7 @@
   <h3 align="center">VideoDB Chat</h3>
 
   <p align="center">
-    Chat UI Components for <a href="https://github.com/video-db/spielberg">  Spielberg</a>
+    Chat UI Components for <a href="https://github.com/video-db/Director">  Director</a>
     <br />
     <a href="https://codesandbox.io/p/sandbox/nifty-mendeleev-tnxpnt"><strong>View Demo »</strong></a>
     <br />
@@ -27,7 +27,7 @@
 
 # 💬 VideoDB Chat
 
-These are Chat UI components to use with [Spielberg](https://github.com/video-db/spielberg).
+These are Chat UI components to use with [Director](https://github.com/video-db/Director).
 
 # 🚀 Quickstart
 
@@ -41,7 +41,7 @@ npm install @videodb/chat-vue
 
 Import the necessary components and styles.
 
-If you are using [Spielberg](https://github.com/video-db/spielberg), make sure it's backend is running and the socket url is correctly passed in `chat-hook-config`
+If you are using [Director](https://github.com/video-db/Director), make sure it's backend is running and the socket url is correctly passed in `chat-hook-config`
 
 ```html
 <script setup>
@@ -67,7 +67,9 @@ If you are using [Spielberg](https://github.com/video-db/spielberg), make sure i
 
 # 📖 Application Flow
 
-![image](https://github.com/user-attachments/assets/3b796945-ab67-4f86-afe9-827079f74a9c)
+![Structure](https://github.com/user-attachments/assets/3dd8feaa-483a-4f28-bfd2-e8bc23dfffea)
+
+
 
 The `ChatInterface` component is composed of two primary sub-components:
 
@@ -88,7 +90,7 @@ When a user sends a message, this component calls the `addMessage()` function, w
 
 ### Default Chat Hook
 
-The default chat hook is `videoDBChatHook`, which integrates with [Spielberg](https://github.com/video-db/spielberg).
+The default chat hook is `videoDBChatHook`, which integrates with [Director](https://github.com/video-db/Director).
 
 > ℹ️ **Note:** To configure your own chat hook, please refer to the [Custom ChatHook](#-custom-chathook) section.
 
@@ -195,7 +197,7 @@ The `ChatInterface` component exposes a method `registerMessageHandler` accessib
 
 The Custom ChatHook is an advanced feature of this package that allows you to:
 
-- Connect to your own backend, bypassing or configuring Spielberg's default backend.
+- Connect to your own backend, bypassing or configuring Director's default backend.
 - Develop custom logic for agent interactions.
 - Control conversation state and manage side effects.
 
@@ -281,7 +283,7 @@ The ChatInterface component accepts the following props:
   - default:
     ```js
     {
-          icon: SpielbergIcon,
+          icon: DirectorIcon,
           links: [
             {
               href: "https://docs.videodb.io",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@videodb/chat-vue",
-	"description": "Chat component for Spielberg",
+	"description": "Chat component for Director",
 	"version": "0.0.5",
 	"author": "VideoDB",
 	"license": "Apache-2.0",

src/components/chat/ChatInterface.vue

@@ -41,7 +41,7 @@
           <div
             class="vdb-c-flex vdb-c-items-center vdb-c-justify-center vdb-c-pt-24 lg:vdb-c-hidden"
           >
-            <spielberg-icon />
+            <director-icon />
           </div>
           <div class="vdb-c-chat-parent vdb-c-relative vdb-c-overflow-hidden">
             <div v-if="configStatus === null"></div>

src/components/chat/elements/SetupCard.vue

@@ -22,7 +22,11 @@
         <h3 class="vdb-c-font-semibold vdb-c-text-nan">
           {{ title }}
         </h3>
-        <p :class="['vdb-c-mt-12 vdb-c-text-sm vdb-c-text-gray-600']">
+        <p
+          :class="[
+            'vdb-c-mt-12 vdb-c-text-sm vdb-c-font-medium vdb-c-text-nan',
+          ]"
+        >
           <span v-if="message.html" v-html="message.html"></span>
           <template v-else>{{ message.text }}</template>
         </p>

src/components/chat/elements/SetupScreen.vue

@@ -29,7 +29,7 @@
       </div>
 
       <div
-        class="vdb-c-grid vdb-c-grid-cols-1 vdb-c-gap-16 sm:vdb-c-grid-cols-2 md:vdb-c-grid-cols-3 lg:vdb-c-grid-cols-4"
+        class="vdb-c-grid vdb-c-grid-cols-1 vdb-c-gap-16 sm:vdb-c-grid-cols-2 md:vdb-c-grid-cols-3 2xl:vdb-c-grid-cols-4"
       >
         <SetupCard
           v-for="(status, key) in configStatus"

src/components/icons/Director.vue

@@ -77,27 +77,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.circle-group {
-  transition: transform 1s ease;
-  transform-origin: 17.4553px 19.1389px; /* Center of the circle */
-}
-
-/* Rotate the group when hovering over the entire SVG */
-.spielberg-icon:hover .circle-group {
-  transform: rotate(360deg);
-}
-
-/* Transition for the circle */
-.spielberg-circle {
-  transition:
-    transform 0.5s ease,
-    fill 0.5s ease;
-}
-
-/* Scale up and change color of the circle when hovering over the entire SVG */
-.spielberg-icon:hover .spielberg-circle {
-  /* transform: scale(1.2); */
-  fill: #ffd700; /* Gold color */
-}
-</style>
+<style scoped></style>

src/components/message-handlers/TextResponse.vue

@@ -13,7 +13,9 @@
 
     <transition name="fade" mode="out-in">
       <div
-        v-if="content.status === 'success' || isUser"
+        v-if="
+          content.status === 'success' || content.status === 'error' || isUser
+        "
         class="vdb-c-flex vdb-c-flex-col"
       >
         <p
@@ -38,10 +40,6 @@
           class="vdb-c-h-16 vdb-c-w-2/3 vdb-c-animate-pulse vdb-c-rounded vdb-c-bg-gray-200"
         ></div>
       </div>
-      <div
-        v-else-if="content.status === 'error'"
-        class="vdb-c-flex vdb-c-flex-col"
-      ></div>
     </transition>
   </div>
 </template>
@@ -74,7 +72,7 @@ const props = defineProps({
   },
 });
 
-const text = computed(() => props.content.text);
+const text = computed(() => props.content?.text || "");
 
 const getMarkedMsg = (msg) => {
   marked.use(markedKatex(options));