chore(frontend): remove websocket, fix types, fix state

.github/workflows/build.yml

@@ -27,7 +27,8 @@ jobs:
         env:
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: 'pk_test_c3VtbWFyeS13YWxydXMtMjUuY2xlcmsuYWNjb3VudHMuZGV2JA'
           NEXT_PUBLIC_API_URL: 'http://localhost:8081'
-          NEXT_PUBLIC_AI_API_URL: 'http://localhost:8081'
+          NEXT_PUBLIC_MODGPT_API_URL: 'http://localhost:8081'
+          NEXT_PUBLIC_CODEMODAI_API_URL: 'http://localhost:8081'
           NEXT_PUBLIC_AUTH_API_URL: 'http://localhost:8080'
           NEXT_PUBLIC_WS_URL: 'ws://localhost:8000'
           HUBSPOT_CONTACT_FORM_ID: ${{ secrets.HUBSPOT_CONTACT_FORM_ID }}

apps/backend/src/cron.ts

@@ -1,7 +1,7 @@
 import { WebClient } from "@slack/web-api";
 import axios from "axios";
 import { CronJob } from "cron";
-import WebSocket from "ws";
+import { WebSocket } from "ws";
 
 import { prisma } from "@codemod-com/database";
 
@@ -107,10 +107,10 @@ const services: Array<{
   {
     name: "Codemod AI Service",
     url: process.env.CODEMOD_AI_SERVICE_URL ?? "",
-    type: "websocket",
+    type: "http",
     available: true,
     webhook:
-      " https://api.instatus.com/v3/integrations/webhook/clzbu558m93630kcn6fnvj8yk8",
+      "https://api.instatus.com/v3/integrations/webhook/clzbu558m93630kcn6fnvj8yk8",
   },
   {
     name: "Run Service",

apps/frontend/app/(website)/studio/features/modGPT/Chat/Chat.tsx

@@ -0,0 +1,121 @@
+import { useAuth } from "@/app/auth/useAuth";
+import { useSnippetsStore } from "@studio/store/snippets";
+
+import { useCodemodAi } from "../hooks/codemod-ai";
+import { useChatStore } from "../store/chat-state";
+import { ChatMessages } from "./ChatWindow/ChatMessages";
+import { ChatScrollAnchor } from "./ChatWindow/ChatScrollAnchor";
+import { EngineSelector } from "./ChatWindow/ModelSelector";
+import { WelcomeScreen } from "./ChatWindow/WelcomeScreen";
+import { PromptPanel } from "./PromptPanel";
+
+export const Chat = () => {
+  const { getAllSnippets } = useSnippetsStore();
+  const { before, after } = getAllSnippets();
+
+  // initializeChat: (engine: LLMEngine) => {
+  //   const existingChat = get().chats[engine];
+
+  //   const { getToken } = useAuth();
+  //   const aliases = useGetAliases();
+
+  //   const newChat = useChat({
+  //     api: `${env.NEXT_PUBLIC_MODGPT_API_URL}/${SEND_CHAT}`,
+  //     onResponse: (response) => {
+  //       // Handle response
+  //     },
+  //     body: { engine },
+  //   });
+
+  //   set((state) => ({
+  //     chats: {
+  //       ...state.chats,
+  //       [engine]: {
+  //         ...newChat,
+  //         append: async (message) => {
+  //           const token = await getToken();
+  //           const aliasesAppliedValue = applyAliases(
+  //             message.content,
+  //             aliases,
+  //           );
+
+  //           return newChat.append(
+  //             { content: aliasesAppliedValue, role: "user" },
+  //             {
+  //               options: {
+  //                 headers: {
+  //                   "Content-Type": "application/json",
+  //                   Authorization: token ? `Bearer ${token}` : "",
+  //                 },
+  //               },
+  //             },
+  //           );
+  //         },
+  //       },
+  //     },
+  //     isModGptLoading: newChat.isLoading,
+  //   }));
+  // },
+  const { isSignedIn } = useAuth();
+  const { messages, appendMessage, isLoading, reset } = useChatStore();
+
+  const { send: autogenerateTestCases } = useCodemodAi({
+    data: {
+      type: "generate_test",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+  const { send: startIterativeCodemodGeneration } = useCodemodAi({
+    data: {
+      type: "generate_codemod",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+
+  return (
+    <div>
+      <div className="h-full">
+        {messages.length > 0 && isSignedIn ? (
+          <>
+            <div className="mb-4 ml-auto w-1/3">
+              <EngineSelector />
+            </div>
+            <ChatMessages messages={messages} />
+            <ChatScrollAnchor trackVisibility={isLoading} />
+          </>
+        ) : (
+          <WelcomeScreen />
+        )}
+      </div>
+
+      <PromptPanel
+      // autogenerateTestCases={autogenerateTestCases}
+      // handleSubmit={modGptSubmit}
+      // resetMessages={resetMessages}
+      // isLoading={isLoading}
+      // stop={handleStop}
+      // reload={reload}
+      // messages={messages}
+      // input={input}
+      // setInput={setInput}
+      // startIterativeCodemodGeneration={startIterativeCodemodGeneration}
+      />
+    </div>
+  );
+};

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/ChatMessage.tsx → apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/ChatMessage.tsx

@@ -1,6 +1,6 @@
+import type { LLMMessage } from "@/app/(website)/studio/features/modgpt/types";
 import CompanyLogoSVG from "@/assets/icons/company_logo.svg";
 import { cn } from "@/utils";
-import type { LLMMessage } from "@chatbot/types";
 import { useTheme } from "@context/useTheme";
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessages.tsx → apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatMessages.tsx

@@ -1,7 +1,7 @@
+import type { LLMMessage } from "@/app/(website)/studio/features/modgpt/types";
 import { cn } from "@/utils";
-import type { LLMMessage } from "@chatbot/types";
 import { Separator } from "@studio/components/ui/separator";
-import { ChatMessage } from "./ChatMessage";
+import { ChatMessage } from "../ChatMessage/ChatMessage";
 
 interface Props {
   messages: LLMMessage[];

apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptForm.tsx → apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptForm.tsx

@@ -6,37 +6,26 @@ import {
 import Tooltip from "@studio/components/Tooltip/Tooltip";
 import { Button, buttonVariants } from "@studio/components/ui/button";
 import { useEnterSubmit } from "@studio/hooks/useEnterSubmit";
-import type { UseChatHelpers } from "ai/react";
 import * as React from "react";
 import Textarea from "react-textarea-autosize";
+import { useModGPT } from "../../hooks/modgpt";
+import { useChatStore } from "../../store/chat-state";
 
-export interface Props extends Pick<UseChatHelpers, "input" | "setInput"> {
-  onSubmit: (value: string) => Promise<void>;
-  onReset: () => void;
-  isLoading: boolean;
-}
+export const PromptForm = React.forwardRef<HTMLTextAreaElement>(
+  (_props, ref) => {
+    const { isLoading, reset } = useChatStore();
+    const { input, setInput, append } = useModGPT("gpt-4o");
 
-export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
-  ({ onSubmit, onReset, input, setInput, isLoading }, ref) => {
     const { formRef, onKeyDown } = useEnterSubmit();
-    const inputRef = React.useRef<HTMLTextAreaElement>(null);
-
-    React.useEffect(() => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, []);
 
     return (
       <form
         className="!mt-1"
         onSubmit={async (e) => {
           e.preventDefault();
-          if (!input?.trim()) {
-            return;
-          }
+          if (!input?.trim()) return;
           setInput("");
-          await onSubmit(input);
+          await append({ content: input, role: "user" });
         }}
         ref={formRef}
       >
@@ -47,7 +36,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
                 type="button"
                 onClick={(e) => {
                   e.preventDefault();
-                  onReset();
+                  reset();
                 }}
                 className={cn(
                   buttonVariants({
@@ -66,7 +55,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
 
           <Textarea
             maxRows={5}
-            ref={ref ?? inputRef}
+            ref={ref}
             tabIndex={0}
             onKeyDown={onKeyDown}
             rows={1}
@@ -82,7 +71,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
                 <Button
                   type="submit"
                   size="sm"
-                  disabled={isLoading || input === ""}
+                  disabled={isLoading || !input}
                   variant="outline"
                 >
                   <ArrowElbowDownLeftIcon />