Handle Function Call Result and show it in the UI

Author: kaustubhkagrawal

README.md

@@ -1,30 +1,37 @@
-# React + TypeScript + Vite
+# Vapi Integration Starter Template
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This starter template is designed to help you quickly integrate Vapi into your project. It showcases a bot that assists authors in defining characters for their stories, demonstrating the ease of integrating Vapi to manipulate the frontend, display backend results, and leverage other capabilities.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **Real-time Interaction**: Interact with the bot in real-time to refine character traits and details.
+- **Message Handling**: Send and receive messages to and from the bot, handling different message types.
+- **Audio Level Visualization**: Visual feedback on the audio level during bot interaction.
+- **Event Handling**: Start, stop, and toggle bot calls with proper event management.
 
-## Expanding the ESLint configuration
+## Getting Started
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+1. Clone the repository.
+2. Install dependencies with `npm install`.
+3. Set up your `.env` file with the required Vapi tokens.
+4. Run the development server with `npm run dev`.
 
-- Configure the top-level `parserOptions` property like this:
+## Integration Points
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+- **Vapi SDK**: Integrated via `vapi.sdk.ts` to manage the Vapi instance.
+- **React Hooks**: `useVapi.ts` to encapsulate Vapi logic within React components.
+- **Event Listeners**: Set up listeners for various Vapi events like speech start/end, call start/end, and message updates.
+- **Message Components**: Render messages and transcripts in real-time as they are received from the bot.
+- **Character Details**: Edit and save character details, which are then sent as messages to the bot for processing.
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Project Structure
+
+- `src/`: Source files for the application.
+- `src/features/Assistant/`: Components and hooks related to Vapi integration.
+- `src/features/Character/`: Components for character details and manipulation.
+- `src/lib/`: Shared types and utility functions.
+- `src/components/ui/`: Reusable UI components.
+
+## Customization
+
+You can customize the bot's behavior and appearance by modifying the `character.assistant.ts` and the corresponding React components.

src/assistants/character.assistant.ts

@@ -59,7 +59,7 @@ export const characterAssistant: CreateAssistantDTO = {
             inspiration: {
               type: "string",
               description:
-                "Based on the user query, this defines the inspiration that the author is looking for. It could be some kind of similarity or something else as well.",
+                "Based on the user query, this defines the inspiration that the author is looking for. It could be some kind of similarity or something else as well. It should be detailed.",
             },
           },
         },

src/features/Character/CharacterPreview.tsx

@@ -4,7 +4,7 @@ function CharacterPreview() {
   return (
     <div>
       <div className="border rounded-lg p-4 flex flex-col gap-2 w-96 m-3 h-auto">
-        <h1 className="text-2xl text-center w-full">Preview</h1>
+        <h1 className="text-2xl text-center w-full">Character Designer</h1>
         <CharacterDetails />
       </div>
     </div>

src/features/Messages/FunctionCallMessage.tsx

@@ -0,0 +1,19 @@
+import { FunctionCallResultMessage } from "../../lib/types/conversation.type";
+
+interface FunctionCallResultMessageProps {
+  message: FunctionCallResultMessage;
+}
+
+export default function FunctionCallResult({
+  message,
+}: FunctionCallResultMessageProps) {
+  return (
+    <div
+      className={`flex w-4/5 text-sm mb-4 justify-end text-[#1a0400] font-medium mx-auto`}
+    >
+      <div className={`p-3 rounded-xl bg-green-100 mx-auto`}>
+        <p className="leading-relaxed">{message.functionCallResult.result}</p>
+      </div>
+    </div>
+  );
+}

src/features/Messages/FunctionCallResult.tsx

@@ -4,13 +4,15 @@ import {
   TranscriptMessage,
 } from "@/lib/types/conversation.type";
 import { ConversationMessage } from "./ConversationMessage";
+import FunctionCallResult from "./FunctionCallResult";
 
 interface MessageListProps {
   messages: Message[];
   activeTranscript?: TranscriptMessage | null;
 }
 
 export function MessageList({ messages, activeTranscript }: MessageListProps) {
+  console.log("messages", messages);
   return (
     <>
       {messages.map((message, index) =>
@@ -19,6 +21,8 @@ export function MessageList({ messages, activeTranscript }: MessageListProps) {
             message={message}
             key={message.type + message?.role + index}
           />
+        ) : message.type === MessageTypeEnum.FUNCTION_CALL_RESULT ? (
+          <FunctionCallResult key={message.type + index} message={message} />
         ) : null
       )}
       {activeTranscript ? (