feat: dynamic content handling

[omgate234]

Pull Request

Description:

Previous Experience

The current types of message.content types we handle are text, image, video, videos and search_results. If user wants to handle an additional content type and want to display the UI for it, there is no option than to clone this repo and write their handler in the package and use a separate instance of this package, which is an anti-pattern with our component library based approach.

Proposed Solution

This solution gives user the ability to configure customMessageHandlers which will be an array of components and their specific type (similar to video, videos etc.) for example audio if you want to display the audio player component.

Configuration details are also mentioned in the README.md file in this PR.

Here is an example for this

You can set up a audio UI handler in this way:

1. Make a views/components/AudioResponse.vue file, which will display the audio data. (We are assuming the format of the message.content)

<script setup>
import { computed } from "vue";

const props = defineProps({
  content: { type: Object, required: true },
  isLastConv: { type: Boolean, default: false },
});

const audio = computed(() => props.content?.audio || {});
const title = computed(() => audio.value?.name || "Generated Audio");
const lengthSec = computed(() => audio.value?.length || null);
</script>

<template>
  <div>
    <p class="my-16 font-semibold text-black">Audio Content is Ready!</p>
    <div class="bg-gray-100 vdb-audio-wrapper">
      <div class="vdb-audio-header">
        <span class="vdb-audio-title">{{ title }}</span>
        <span v-if="lengthSec" class="vdb-audio-length"
          >{{ Math.round(lengthSec) }}s</span
        >
      </div>
      <audio
        v-if="audio?.url"
        class="vdb-audio-player"
        :src="audio.url"
        controls
        preload="none"
      />
      <div v-else class="vdb-audio-fallback">Audio is preparing…</div>
    </div>
  </div>
</template>

<style scoped>
.vdb-audio-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafafb;
  border: #fafafb;
  max-width: 440px;
  color: black;
  border-radius: 10px;
  padding: 12px;
}
.vdb-audio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vdb-audio-title {
  font-weight: 600;
}
.vdb-audio-length {
  opacity: 0.7;
  font-size: 12px;
}
.vdb-audio-player {
  width: 100%;
}
.vdb-audio-fallback {
  opacity: 0.7;
  font-size: 14px;
}
</style>

2. Import it in the views/DefaultView.vue and pass it in the form of an array

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ChatInterface } from "@videodb/chat-vue";
import "@videodb/chat-vue/dist/style.css";
import AudioResponse from "../views/components/AudioResponse.vue";

// ... omited for brevity
</script>

<template>
  <main>
    <chat-interface
      ref="chatInterfaceRef"
      :chat-hook-config="{
        socketUrl: `${BACKEND_URL}/chat`,
        httpUrl: `${BACKEND_URL}`,
        debug: true,
      }"
      :custom-message-handlers="[{ type: 'audio', component: AudioResponse }]"
    />
  </main>
</template>

That's it. Nothing more needed. Following is the output generated, without adding a separate message handler

Changes:

• Configurable message handlers
• Applied callApi which will allows users to utilise any backend APIs

Related Issues:

Testing:
Follow the steps given above to check it out

Checklist:

• Code follows project coding standards
• Tests have been added or updated
• Code Review
• Manual test after merge
• All checks passed