VideoDB Chat

Chat UI Components for Director
View Demo »

Report Bug · Request Feature

💬 VideoDB Chat

These are Chat UI components to use with Director.

🚀 Quickstart

Installation

npm install @videodb/chat-vue

Usage

Import the necessary components and styles.

If you are using Director, make sure it's backend is running and the socket url is correctly passed in chat-hook-config

<script setup>
  import { ChatInterface } from "@videodb/chat-vue";
  import "@videodb/chat-vue/dist/style.css";

  const socketUrl = "http://127.0.0.1:8000/chat";
  const httpUrl = "http://127.0.0.1:8000";
</script>

<template>
  <div>
    <ChatInterface
      :chat-hook-config="{
        socketUrl: socketUrl,
        httpUrl: httpUrl,
        debug: true,
      }"
    />
  </div>
</template>

📖 Application Flow

The ChatInterface component is composed of two primary sub-components:

• <ChatMessageContainer/>
• <ChatMessageInput/>

<ChatMessageContainer/>

This component displays both past and current conversations within a session. Conversations are stored in the conversations variable, a reactive object exported by the chat hook. This variable updates in real-time as the conversation progresses.

Each conversation consists of input and output messages, which are rendered as <ChatMessage/> components. Output messages can contain various content types such as text, video, or image. These are rendered by their respective message handlers.

ℹ️ Note: To add support for additional content types, please refer to the Custom Message Handler section.

<ChatMessageInput/>

When a user sends a message, this component calls the addMessage() function, which in turn invokes the addMessage function of the chat hook.

Default Chat Hook

The default chat hook is videoDBChatHook, which integrates with Director.

ℹ️ Note: To configure your own chat hook, please refer to the Custom ChatHook section.

🧑‍💻 Additional Components

This package includes other UI components that enhance the chat experience

<Sidebar/>

This component facilitates navigation between different sessions and collections. It can be used to switch between various conversations or collections.

You can customize the branding of the sidebar by passing a sidebarConfig prop to <ChatInterface/>.

<DefaultScreen/>

This component displays the default screen when there are no conversations in the chat. It showcases the agents and action cards.

You can configure the DefaultScreen by passing a defaultScreenConfig prop to <ChatInterface/>.

<CollectionView/> and <VideoView/>

These components are used to display collection and video views, helping users better understand the context of the conversation.

🧑‍💻 Concepts

🔧 Message Handlers

---

Message handlers are UI components that are used to render the content of a message that are in conversations object. They are registered with the ChatInterface component and are used to render the content of messages that have a content type that matches the contentType of the handler.

These are the default message handlers that are currently supported by this package:

Text:

contentType: text
Renders the text/markdown of the message

View implementation

Video:

contentType: video
Renders the video(streaming urls) of the message

View implementation

Image:

contentType: image
Renders the image of the message

View implementation

Search Results:

contentType: search_results
Renders the search results of the video

View implementation

🔧 Custom Message Handler

---

Custom message handlers allow you to register specialized UI components for various content types. This is particularly useful when adding new agents that require UI elements beyond the currently supported types.

The ChatInterface component exposes a method registerMessageHandler accessible via ref, enabling you to register custom message handlers. This function accepts two arguments:

• contentType: String
  The name of the agent for which the message handler is registered. The handler will be used for content types where message's content has a content type that matches contentType.

• handler: Component
  The UI component to be rendered for the message type.

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.

Checkout these resources to understand better:

• View default message handlers Implementation

🔧 Custom ChatHook

---

The Custom ChatHook is an advanced feature of this package that allows you to:

• 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.

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.

  {
    isConnected: false,
    sessionId: null,
    videoId: null,
    collectionId: "default",
  }

• collections: Array (reactive)
  List of collections.

• sessions: Array (reactive)
  List of sessions.

• agents: Array (reactive)
  List of agents.

• activeCollectionData: Object (reactive)
  Data of the collection in context.

• activeCollectionVideos: Array (reactive)
  List of videos of the collection in context.

• activeVideoData: Object (reactive)
  Data of the video in context.

• conversations: Object (reactive)
  See the Conversations section for more details.

• addMessage(): Function
  Adds a message to the conversation. This function is called when the user clicks the Send button

• loadSession(): Function
  Loads a session. This function is called either when new session needs to be created or when the user clicks on a past session from sidebar. When new session needs to be create, no arguments are passed to the function. When the user clicks on a past session, the sessionId is passed as an argument.

Checkout these resources to understand better:

• View default chat hook Implementation
• View custom chat hook example on CodeSandbox

📡 Interface

ChatInterface

Props

The ChatInterface component accepts the following props:

• chatInputPlaceholder:

  • default: "Ask Speilberg"
  • Customizes the placeholder text for the chat input field.

• 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.

• customChatHook(Function):

  • default: videoDBChatHook
  • Allows for a custom hook to handle chat functionality.

• chatHookConfig(object):

  • Configures the chat hook. For the default chat hook, it includes:
  • default

      socketUrl: "http://127.0.0.1:8000/chat",
      httpUrl: "http://127.0.0.1:8000",
      debug: false,

• sidebarConfig(string):

  • Customizes the sidebar.
  • default:

    {
          icon: DirectorIcon,
          links: [
            {
              href: "https://docs.videodb.io",
              text: "Documentation",
            },
          ],
          primaryLink: {
            href: "https://console.videodb.io",
            text: "VideoDB Console",
            icon: VideoDBLogo,
          },
    }

• defaultScreenConfig(Object):

  • default: a list of action cards with default queries
  • Customizes the default screen.

Exposed Variables

State Variables

• conversations: Object

Methods

• addMessage(message):
  Adds a message to the conversation.
• registerMessageHandler(contentType, handler):
  Registers a custom message handler for a specific content type.