wip

Author: r4zendev

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

@@ -1,7 +1,5 @@
 import type { useAiService } from "@/app/(website)/studio/features/modgpt/useAiService";
 import { memo } from "react";
-import { useCodemodAi } from "../hooks/codemod-ai";
-import { useModGPT } from "../hooks/modgpt";
 import { ChatWindow } from "./Chat/ChatWindow";
 import { PromptPanel } from "./Chat/PromptPanel";
 
@@ -26,28 +24,25 @@ const ChatBase = ({ className, isSignedIn }: Props) => {
   //   autogenerateTestCases,
   // };
 
-  const modGPT = useModGPT("gpt-4o");
-  const { send: callCodemodAI, messages } = useCodemodAi("gpt-4o");
-
   return (
     <>
       <ChatWindow
-        isLoading={isLoading}
-        messages={messages}
-        isSignedIn={isSignedIn}
-        className={className}
+      // isLoading={isLoading}
+      // messages={messages}
+      // isSignedIn={isSignedIn}
+      // className={className}
       />
       <PromptPanel
-        autogenerateTestCases={autogenerateTestCases}
-        handleSubmit={modGptSubmit}
-        resetMessages={resetMessages}
-        isLoading={isLoading}
-        stop={handleStop}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-        startIterativeCodemodGeneration={startIterativeCodemodGeneration}
+      // autogenerateTestCases={autogenerateTestCases}
+      // handleSubmit={modGptSubmit}
+      // resetMessages={resetMessages}
+      // isLoading={isLoading}
+      // stop={handleStop}
+      // reload={reload}
+      // messages={messages}
+      // input={input}
+      // setInput={setInput}
+      // startIterativeCodemodGeneration={startIterativeCodemodGeneration}
       />
     </>
   );

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

@@ -9,6 +9,9 @@ import { useEnterSubmit } from "@studio/hooks/useEnterSubmit";
 import type { UseChatHelpers } from "ai/react";
 import * as React from "react";
 import Textarea from "react-textarea-autosize";
+import { useCodemodAi } from "../../hooks/codemod-ai";
+import { useModGPT } from "../../hooks/modgpt";
+import { useChatStore } from "../../store/chat-state";
 
 export interface Props extends Pick<UseChatHelpers, "input" | "setInput"> {
   onSubmit: (value: string) => Promise<void>;
@@ -17,7 +20,12 @@ export interface Props extends Pick<UseChatHelpers, "input" | "setInput"> {
 }
 
 export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
-  ({ onSubmit, onReset, input, setInput, isLoading }, ref) => {
+  ({ input, setInput }, ref) => {
+    const { messages, reset, isGeneratingCodemod, isGeneratingTestCases } =
+      useChatStore();
+    const modGPT = useModGPT("gpt-4o");
+    const { send: callCodemodAI, abort } = useCodemodAi("gpt-4o");
+
     const { formRef, onKeyDown } = useEnterSubmit();
     const inputRef = React.useRef<HTMLTextAreaElement>(null);
 

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

@@ -1,53 +1,62 @@
 import { AliasButtons } from "@/app/(website)/studio/features/modgpt/PromptPanel/AliasButtons";
 import { ControlButtons } from "@/app/(website)/studio/features/modgpt/PromptPanel/ControlButtons";
-import { WebSocketButton } from "@/app/(website)/studio/features/modgpt/PromptPanel/WebSocketButton";
-import { insertValue } from "@/app/(website)/studio/features/modgpt/PromptPanel/utils";
-import type { useAiService } from "@/app/(website)/studio/features/modgpt/useAiService/useAiService";
-import type { useModGptSubmit } from "@/app/(website)/studio/features/modgpt/useAiService/useModGpt/useModGptSubmit";
 import { getOrderedAliasList } from "@/app/(website)/studio/features/modgpt/utils";
+import ButtonWithTooltip from "@/app/(website)/studio/src/components/button/BottonWithTooltip";
+import { useSnippetsStore } from "@/app/(website)/studio/src/store/snippets";
 import { useAuth } from "@clerk/nextjs";
 import { useGetAliases } from "@studio/store/CFS/alias";
-import type { UseChatHelpers } from "ai/react";
+import Link from "next/link";
 import { useRef, useState } from "react";
+import { useCodemodAi } from "../../hooks/codemod-ai";
+import { useModGPT } from "../../hooks/modgpt";
+import { useChatStore } from "../../store/chat-state";
 import { PromptForm } from "./PromptForm";
 import { ScrollToBottomButton } from "./ScrollToBottomButton";
 
-export type PromptPanelProps = Pick<
-  UseChatHelpers,
-  "isLoading" | "reload" | "messages" | "stop" | "input" | "setInput"
-> & {
-  handleSubmit: ReturnType<typeof useModGptSubmit>;
-  startIterativeCodemodGeneration: ReturnType<
-    typeof useAiService
-  >["startIterativeCodemodGeneration"];
-  resetMessages: ReturnType<typeof useAiService>["resetMessages"];
-};
-
-export function PromptPanel(props: PromptPanelProps) {
+export function PromptPanel() {
   const {
-    handleSubmit,
-    isLoading,
-    stop,
+    reset,
+    isGeneratingCodemod,
+    isGeneratingTestCases,
+    messages,
+    appendMessage,
     input,
     setInput,
-    messages,
-    startIterativeCodemodGeneration,
-    resetMessages,
-  } = props;
+  } = useChatStore();
+
+  const { getAllSnippets } = useSnippetsStore();
+
+  const { before, after } = getAllSnippets();
+  const modGPT = useModGPT("gpt-4o");
+  const { send: startCodemodGeneration, abort } = useCodemodAi({
+    input: {
+      type: "generate_codemod",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [expandedHelper, setExpandedHelper] = useState(true);
   const { isSignedIn } = useAuth();
   const aliases = useGetAliases();
   const aliasList = getOrderedAliasList(aliases);
 
-  const handleInsertValue = (value: string) => {
-    const textArea = textAreaRef.current;
-    if (textArea) {
-      const updatedInput = insertValue(textArea, input, value);
-      setInput(updatedInput);
-      textArea.focus();
-    }
-  };
+  // const handleInsertValue = (value: string) => {
+  //   const textArea = textAreaRef.current;
+  //   if (textArea) {
+  //     const updatedInput = insertValue(textArea, input, value);
+  //     setInput(updatedInput);
+  //     textArea.focus();
+  //   }
+  // };
 
   return (
     <div className="chatPanel absolute bottom-0 mx-auto w-full sm:pl-8 sm:pr-16">
@@ -61,10 +70,28 @@ export function PromptPanel(props: PromptPanelProps) {
       {expandedHelper && (
         <>
           <div className="mb-1 flex w-full gap-1 overflow-x-auto px-1 items-center justify-content-center actions">
-            <WebSocketButton
-              handleButtonClick={() => startIterativeCodemodGeneration()}
-              isLoading={isLoading}
-            />
+            <ButtonWithTooltip
+              tooltipContent={
+                <>
+                  with selected model and Codemod’s iterative AI system.
+                  <Link
+                    style={{ color: "blue" }}
+                    href="https://codemod.com/blog/iterative-ai-system"
+                  >
+                    {" "}
+                    Learn more
+                  </Link>
+                </>
+              }
+              variant="default"
+              size="sm"
+              className="text-white flex gap-1 text-xs my-0 h-8 !py-0 bg-black hover:bg-accent hover:text-black"
+              // className="group my-0 h-8 whitespace-nowrap !py-0 text-xs font-bold bg-primary"
+              onClick={() => startCodemodGeneration()}
+              disabled={isGeneratingCodemod}
+            >
+              Autogenerate with Codemod AI
+            </ButtonWithTooltip>
           </div>
           <AliasButtons
             aliasList={aliasList}
@@ -75,11 +102,9 @@ export function PromptPanel(props: PromptPanelProps) {
       <div className="relative">
         <PromptForm
           ref={textAreaRef}
-          onSubmit={handleSubmit}
           input={input}
           setInput={setInput}
-          isLoading={isLoading}
-          onReset={resetMessages}
+          onReset={reset}
         />
       </div>
     </div>

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

@@ -6,14 +6,20 @@ export async function fetchStream(opts: {
 }) {
   const { url, onChunk, options } = opts;
 
-  const response = await fetch(url, options);
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      Authorization: `Bearer ${opts.token}`,
+    },
+  });
 
   if (response.body === null) {
     throw new Error("ReadableStream not yet supported in this browser.");
   }
 
   for await (const chunk of response.body as any) {
-    if (options?.signal?.aborted) break; // just break out of loop
+    if (options?.signal?.aborted) break;
 
     onChunk(chunk.toString());
   }