[frontend] Move chat to new component file

MananGandhi1810 · Oct 31, 2024 · 9f694bd · 9f694bd
1 parent ed67898
commit 9f694bd
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 63 deletions.
diff --git a/frontend/src/components/custom/AIChat.jsx b/frontend/src/components/custom/AIChat.jsx
@@ -0,0 +1,72 @@
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+import React from "react";
+import Markdown from "react-markdown";
+import { Textarea } from "../ui/textarea";
+import { Button } from "../ui/button";
+import { Send } from "lucide-react";
+
+function AIChat({
+    chatHistory,
+    currentResponse,
+    handleSendMessage,
+    aiInput,
+    setAiInput,
+}) {
+    return (
+        <div className="flex h-full-w-nav-w-tab w-full flex-col">
+            <ScrollArea className="h-full-w-nav-w-tab flex flex-col p-6 py-0 overflow-auto">
+                {chatHistory.map((message) => (
+                    <div
+                        key={() => new Date().toISOString()}
+                        className={`mb-4 p-3 rounded-lg ${
+                            message.role === "user"
+                                ? "bg-primary text-primary-foreground ml-auto"
+                                : "bg-muted mr-auto"
+                        } max-w-[80%] w-fit text-wrap break-keep`}
+                    >
+                        {message.role == "assistant" ? (
+                            <Markdown className="prose dark:prose-invert min-w-full max-w-full w-full">
+                                {message.content}
+                            </Markdown>
+                        ) : (
+                            <p>{message.content}</p>
+                        )}
+                    </div>
+                ))}
+                {currentResponse.trim() != "" && (
+                    <div
+                        key={() => Date()}
+                        className="mb-4 p-3 rounded-lg bg-muted mr-auto max-w-[80%] w-fit text-wrap break-keep"
+                    >
+                        <Markdown className="prose dark:prose-invert min-w-full max-w-full w-full">
+                            {currentResponse}
+                        </Markdown>
+                    </div>
+                )}
+            </ScrollArea>
+            <form
+                onSubmit={handleSendMessage}
+                className="flex w-full items-end space-x-2 p-6 pt-0"
+            >
+                <Textarea
+                    value={aiInput}
+                    onChange={(e) => setAiInput(e.target.value)}
+                    placeholder="Type your message here..."
+                    className="flex-1 resize-none"
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            handleSendMessage(e);
+                        }
+                    }}
+                />
+                <Button type="submit" size="icon">
+                    <Send className="h-4 w-4" />
+                    <span className="sr-only">Send message</span>
+                </Button>
+            </form>
+        </div>
+    );
+}
+
+export default AIChat;
diff --git a/frontend/src/pages/Code.jsx b/frontend/src/pages/Code.jsx
@@ -41,6 +41,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import AIChat from "@/components/custom/AIChat";
 
 function Code() {
     const problemStatement = useLoaderData();
@@ -371,69 +372,13 @@ function Code() {
                                     </ScrollArea>
                                 </TabsContent>
                                 <TabsContent value="ai">
-                                    <div className="flex h-full-w-nav-w-tab w-full flex-col">
-                                        <ScrollArea className="h-full-w-nav-w-tab flex flex-col p-6 py-0 overflow-auto">
-                                            {chatHistory.map((message) => (
-                                                <div
-                                                    key={() =>
-                                                        new Date().toISOString()
-                                                    }
-                                                    className={`mb-4 p-3 rounded-lg ${
-                                                        message.role === "user"
-                                                            ? "bg-primary text-primary-foreground ml-auto"
-                                                            : "bg-muted mr-auto"
-                                                    } max-w-[80%] w-fit text-wrap break-keep`}
-                                                >
-                                                    {message.role ==
-                                                    "assistant" ? (
-                                                        <Markdown className="prose dark:prose-invert min-w-full max-w-full w-full">
-                                                            {message.content}
-                                                        </Markdown>
-                                                    ) : (
-                                                        <p>{message.content}</p>
-                                                    )}
-                                                </div>
-                                            ))}
-                                            {currentResponse.trim() != "" && (
-                                                <div
-                                                    key={() => Date()}
-                                                    className="mb-4 p-3 rounded-lg bg-muted mr-auto max-w-[80%] w-fit text-wrap break-keep"
-                                                >
-                                                    <Markdown className="prose dark:prose-invert min-w-full max-w-full w-full">
-                                                        {currentResponse}
-                                                    </Markdown>
-                                                </div>
-                                            )}
-                                        </ScrollArea>
-                                        <form
-                                            onSubmit={handleSendMessage}
-                                            className="flex w-full items-end space-x-2 p-6 pt-0"
-                                        >
-                                            <Textarea
-                                                value={aiInput}
-                                                onChange={(e) =>
-                                                    setAiInput(e.target.value)
-                                                }
-                                                placeholder="Type your message here..."
-                                                className="flex-1 resize-none"
-                                                onKeyDown={(e) => {
-                                                    if (
-                                                        e.key === "Enter" &&
-                                                        !e.shiftKey
-                                                    ) {
-                                                        e.preventDefault();
-                                                        handleSendMessage(e);
-                                                    }
-                                                }}
-                                            />
-                                            <Button type="submit" size="icon">
-                                                <Send className="h-4 w-4" />
-                                                <span className="sr-only">
-                                                    Send message
-                                                </span>
-                                            </Button>
-                                        </form>
-                                    </div>
+                                    <AIChat
+                                        chatHistory={chatHistory}
+                                        currentResponse={currentResponse}
+                                        handleSendMessage={handleSendMessage}
+                                        aiInput={aiInput}
+                                        setAiInput={setAiInput}
+                                    />
                                 </TabsContent>
                             </Tabs>
                         </ResizablePanel>