feat(content): zod and streaming response feature added

Author: ayat-delineate

package-lock.json

@@ -53,6 +53,7 @@
     "lucide-react": "^0.456.0",
     "next-themes": "^0.4.3",
     "openai": "^4.72.0",
+    "partial-json": "^0.1.7",
     "react": "^18.3.1",
     "react-ace": "^13.0.0",
     "react-day-picker": "^8.10.1",

package.json

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import leetCode from '@/assets/leetcode.png'
 import React from 'react'
 import Show from './components/Show'
@@ -13,6 +14,21 @@ const Popup: React.FC = () => {
     ;(async function loadOpenAPIKey() {
       if (!chrome) return
       const apiKeyFromStorage = (await chrome.storage.local.get('apiKey')) as {
+=======
+import React from "react";
+import leetCode from "@/assets/leetcode.png";
+import { Input } from "./components/ui/input";
+import { Button } from "./components/ui/button";
+
+const Popup: React.FC = () => {
+  const [openAIKey, setOpenAIKey] = React.useState("");
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    (async function loadOpenAPIKey() {
+      if (!chrome) return;
+      const apiKeyFromStorage = (await chrome.storage.local.get("apiKey")) as {
+>>>>>>> e73346b (feat(content): zod and streaming response feature added)
         apiKey?: string;
       };
       if (apiKeyFromStorage.apiKey)
@@ -55,7 +71,11 @@ const Popup: React.FC = () => {
               value={openAIKey}
               onChange={(e) => setOpenAIKey(e.target.value)}
               placeholder="Ex. 0aBbnGgzXXXXXX"
+<<<<<<< HEAD
               className="bg-white text-black outline-none"
+=======
+              className="bg-white outline-none"
+>>>>>>> e73346b (feat(content): zod and streaming response feature added)
             />
 
             <Button onClick={handleAddOpenAPIKey} className="dark">

src/App.tsx

@@ -41,7 +41,22 @@ Tone & Style:
 - Use emojis like 🌟, 🙌, or ✅ to make the conversation fun and engaging.
 - Avoid long, formal responses—be natural and conversational.
 
+<<<<<<< HEAD
 Example JSON Response:
+=======
+
+Problem Statement:
+\'\'\'
+{{problem_statement}}
+\'\'\'
+
+User Programming Language: {{programming_language}}
+
+User Code:
+\`\`\`{{programming_language}}
+{{user_code}}
+\`\`\`
+>>>>>>> e73346b (feat(content): zod and streaming response feature added)
 
 {
  "output": {

src/constants/prompt.ts

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { Bot, ClipboardCopy, Send, SendHorizontal } from 'lucide-react';
+import { Bot, ClipboardCopy, Send } from 'lucide-react';
 import OpenAI from 'openai';
-
 import './style.css';
 import { Input } from '@/components/ui/input';
 import { SYSTEM_PROMPT } from '@/constants/prompt';
@@ -33,8 +32,14 @@ interface ChatBoxProps {
   };
 }
 
+// Define the schema for the AI response
+export const AIResponseSchema = z.object({
+  content: z
+    .string()
+    .describe("The content of the response in markdown format"),
+});
 interface ChatMessage {
-  role: 'user' | 'assistant';
+  role: "user" | "assistant";
   message: string;
   type: 'text' | 'markdown';
   assistantResponse?: {
@@ -75,17 +80,17 @@ function ChatBox({ context, visible }: ChatBoxProps) {
     const extractedCode = extractCode(userCurrentCodeContainer);
 
     const systemPromptModified = SYSTEM_PROMPT.replace(
-      '{{problem_statement}}',
+      "{{problem_statement}}",
       context.problemStatement
     )
       .replace('{{programming_language}}', programmingLanguage)
       .replace('{{user_code}}', extractedCode);
 
     const apiResponse = await openai.chat.completions.create({
-      model: 'chatgpt-4o-latest',
-      response_format: { type: 'json_object' },
+      model: "gpt-4o-2024-08-06", // support json format
+      response_format: zodResponseFormat(AIResponseSchema, "responseSchema"),
       messages: [
-        { role: 'system', content: systemPromptModified },
+        { role: "system", content: systemPromptModified },
         ...chatHistory.map(
           (chat) =>
             ({
@@ -126,7 +131,7 @@ function ChatBox({ context, visible }: ChatBoxProps) {
   const onSendMessage = () => {
     setChatHistory((prev) => [
       ...prev,
-      { role: 'user', message: value, type: 'text' },
+      { role: "user", message: value, type: "text" },
     ]);
     chatBoxRef.current?.scrollIntoView({ behavior: 'smooth' });
     setValue('');