Add functionality to edit the character details manually as well.

Author: kaustubhkagrawal

.gitignore

@@ -26,4 +26,5 @@ dist-ssr
 .env
 *.env
 .env.*
-!example.env
+!example.env
+.vercel

src/features/Character/CharacterDetails.tsx

@@ -0,0 +1,105 @@
+import { Message, MessageTypeEnum } from "@/lib/types/conversation.type";
+import { Check, Pencil, X } from "lucide-react";
+import React, { useEffect } from "react";
+import { vapi } from "../Assistant";
+
+function CharacterDetails() {
+  const [characterDetails, setCharacterDetails] = React.useState<
+    Record<string, string>
+  >({
+    name: "John Doe",
+    "personality traits":
+      "Mysterious, Intelligent, Smart, Ruthless, Cunning, Manipulative.",
+  });
+
+  const [editKey, setEditKey] = React.useState<string | null>(null);
+  const [editValue, setEditValue] = React.useState<string>("");
+
+  useEffect(() => {
+    const onMessageUpdate = (message: Message) => {
+      if (message.type !== MessageTypeEnum.FUNCTION_CALL) return;
+      if (message.functionCall.name === "finalizeDetail") {
+        const params = message.functionCall.parameters;
+        setCharacterDetails((details) => ({
+          ...details,
+          [params.key.toLowerCase()]: [params.value],
+        }));
+      }
+    };
+
+    vapi.on("message", onMessageUpdate);
+    return () => {
+      vapi.off("message", onMessageUpdate);
+    };
+  }, []);
+
+  const handleEdit = (key: string) => {
+    setEditKey(key);
+    setEditValue(characterDetails[key]);
+  };
+
+  const handleEditChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setEditValue(event.target.value);
+  };
+
+  const handleCancel = () => {
+    setEditKey(null);
+    setEditValue("");
+  };
+
+  const handleSave = () => {
+    if (editKey) {
+      vapi.send({
+        type: MessageTypeEnum.ADD_MESSAGE,
+        message: {
+          role: "system",
+          content: `The user has updated the final value for ${editKey} to ${editValue}.`,
+        },
+      });
+    }
+    setEditKey(null);
+    setEditValue("");
+  };
+  return (
+    <>
+      {Object.keys(characterDetails).map((key: string) => (
+        <div className="flex flex-row gap-2 justify-between w-full" key={key}>
+          <h1 className="font-bold capitalize">{key}</h1>
+          <div className="flex">
+            {editKey === key ? (
+              <textarea
+                value={editValue}
+                className="border-0 h-auto focus-visible:ring-0 focus-visible:outline-none"
+                onChange={handleEditChange}
+              />
+            ) : (
+              <div className="transition text-right ">
+                {characterDetails[key]}
+              </div>
+            )}
+            {editKey === key ? (
+              <div className="right-0 top-0 flex">
+                <button onClick={handleCancel} className="py-1">
+                  <X size={16} className="font-bold text-red-500" />
+                </button>
+                <button className="py-1">
+                  <Check
+                    size={16}
+                    onClick={handleSave}
+                    className="font-bold text-green-500"
+                  />
+                </button>
+              </div>
+            ) : (
+              <button className="p-1" onClick={() => handleEdit(key)}>
+                <Pencil size={16} className="font-bold text-blue-500" />
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export { CharacterDetails };

src/features/Character/CharacterPreview.tsx

@@ -1,50 +1,11 @@
-import React, { useEffect } from "react";
-import { vapi } from "../Assistant";
-import { Message, MessageTypeEnum } from "../../lib/types/conversation.type";
+import { CharacterDetails } from "./CharacterDetails";
 
 function CharacterPreview() {
-  const [characterDetails, setCharacterDetails] = React.useState<
-    Record<string, string>
-  >({});
-
-  useEffect(() => {
-    const onMessageUpdate = (message: Message) => {
-      if (message.type !== MessageTypeEnum.FUNCTION_CALL) return;
-      console.log("messaged", message);
-      if (message.functionCall.name === "finalizeDetail") {
-        console.log(
-          "message.functionCall.parameters",
-          message.functionCall.parameters
-        );
-        const params = message.functionCall.parameters;
-        // Add the topping to the pizza
-        setCharacterDetails((details) => ({
-          ...details,
-          [params.key]: [params.value],
-        }));
-      }
-    };
-
-    vapi.on("message", onMessageUpdate);
-
-    return () => {
-      vapi.off("message", onMessageUpdate);
-    };
-  }, []);
-
   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>
-        {Object.keys(characterDetails).length === 0 ? (
-          <p className="text-slate-500 w-full text-center">No details yet.</p>
-        ) : null}
-        {Object.keys(characterDetails).map((key: string) => (
-          <div className="flex flex-row gap-2 justify-between w-full" key={key}>
-            <h1 className="font-bold capitalize">{key}</h1>
-            <p className="text-right">{characterDetails[key]}</p>
-          </div>
-        ))}
+        <CharacterDetails />
       </div>
     </div>
   );

src/lib/types/conversation.type.ts

@@ -2,6 +2,7 @@ export enum MessageTypeEnum {
   TRANSCRIPT = "transcript",
   FUNCTION_CALL = "function-call",
   FUNCTION_CALL_RESULT = "function-call-result",
+  ADD_MESSAGE = "add-message",
 }
 
 export enum MessageRoleEnum {