chore: article generation

src/app/api/storm/route.ts

@@ -1,77 +1,65 @@
-import { serve } from "@upstash/qstash/nextjs";
 import axios from "axios";
 import { env } from "@/app/env.mjs";
 import { saveToDB } from "@/utils/apiHelper";
 import { auth } from "@clerk/nextjs";
 import { nanoid } from "ai";
-import { NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
 export const POST = async (request: NextRequest) => {
   const url = request.url;
   const urlArray = url.split("/");
   const { orgSlug } = auth();
+  const body = await request.json();
 
-  const handler = serve(async (context) => {
-    const body = context.requestPayload as { topic: string };
-    const stormResponse = await context.run("Initiating Storm to generate article", async () => {
-      const response = await axios.post(
-        `${env.KEYCLOAK_BASE_URL}/realms/${env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
-        new URLSearchParams({
-          client_id: env.KEYCLOAK_CLIENT_ID,
-          client_secret: env.KEYCLOAK_CLIENT_SECRET,
-          grant_type: "client_credentials",
-        }),
-        {
-          headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-          },
-        },
-      );
-      const accessToken = response.data.access_token;
+  const response = await axios.post(
+    `${env.KEYCLOAK_BASE_URL}/realms/${env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
+    new URLSearchParams({
+      client_id: env.KEYCLOAK_CLIENT_ID,
+      client_secret: env.KEYCLOAK_CLIENT_SECRET,
+      grant_type: "client_credentials",
+    }),
+    {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    },
+  );
+  const accessToken = response.data.access_token;
 
-      const stormResponse = await axios.post(
-        `${env.STORM_ENDPOINT}`,
-        {
-          topic: body.topic,
-          search_top_k: 5,
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        },
-      );
-      return stormResponse.data;
-    });
+  const stormResponse = await axios.post(
+    `${env.STORM_ENDPOINT}`,
+    {
+      topic: body.topic,
+      search_top_k: 5,
+    },
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
 
-    await context.run("Saving Article to db", async () => {
-      const body = context.requestPayload as {
-        topic: string;
-        chatId: string;
-        orgId: string;
-        userId: string;
-      };
-      const chatId = body.chatId;
-      const orgId = body.orgId;
-      const userId = body.userId;
-      const latestResponse = {
-        id: nanoid(),
-        role: "assistant" as const,
-        content: stormResponse.content,
-        createdAt: new Date(),
-        audio: "",
-      };
+  const chatId = body.chatId;
+  const orgId = body.orgId;
+  const userId = body.userId;
+  const latestResponse = {
+    id: nanoid(),
+    role: "assistant" as const,
+    content: stormResponse?.data?.content,
+    createdAt: new Date(),
+    audio: "",
+  };
 
-      await saveToDB({
-        _chat: [],
-        chatId: Number(chatId),
-        orgSlug: orgSlug as string,
-        latestResponse: latestResponse,
-        userId: userId,
-        orgId: orgId,
-        urlArray: urlArray,
-      });
-    });
+  await saveToDB({
+    _chat: [],
+    chatId: Number(chatId),
+    orgSlug: orgSlug as string,
+    latestResponse: latestResponse,
+    userId: userId,
+    orgId: orgId,
+    urlArray: urlArray,
+  });
+  return NextResponse.json({
+    data: stormResponse.data,
   });
-  return await handler(request);
 };

src/components/chat.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { ChatType } from "@/lib/types";
 import InputBar from "@/components/inputBar";
 import { Message, useChat } from "ai/react";
@@ -55,6 +55,7 @@ export default function Chat(props: ChatProps) {
   );
   const [isNewChat, setIsNewChat] = useQueryState("new");
   const [incomingInput] = useQueryState("input");
+  const soonToastRef = useRef<number | string | undefined>();
   const { mutate: InitArticleGeneration } = useMutation({
     mutationFn: async ({
       topic,
@@ -67,6 +68,11 @@ export default function Chat(props: ChatProps) {
       orgId: string;
       userId: string;
     }) => {
+      soonToastRef.current = soonerToast("Generating your article", {
+        description: "Please wait for 2 mins",
+        duration: 300 * 1000,
+      });
+      console.log("storm");
       const resp = await axios.post("/api/storm", {
         topic: topic,
         chatId: chatId,
@@ -76,16 +82,11 @@ export default function Chat(props: ChatProps) {
       return resp.data;
     },
     onSuccess: (data, vars, context) => {
-      soonerToast("Generating your article", {
-        description: "Please wait for 2 mins",
-        duration: 300 * 1000,
-      });
-
       //TODO: set workflow id in state and make query to start invalidating
-      console.log("workflow id", data.workflowRunId);
+      soonerToast.dismiss(soonToastRef.current);
     },
     onError: (error: any, vars, context) => {
-      console.error(error?.message);
+      soonerToast.dismiss(soonToastRef.current);
       soonerToast("Something went wrong ", {
         description: "Sunday, December 03, 2023 at 9:00 AM",
         duration: 5 * 1000,

src/components/chatcard.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/components/card";
 import Chatusers, { getUserIdList } from "@/components/chatusersavatars";
 import { CircleNotch } from "@phosphor-icons/react";
-import { ChatEntry, ChatLog } from "@/lib/types";
+import { ChatEntry, ChatLog, ChatType } from "@/lib/types";
 import Image from "next/image";
 import AudioButton from "@/components//audioButton";
 import { useRouter } from "next/navigation";
@@ -30,6 +30,22 @@ type Props = {
   isHome?: boolean;
 };
 
+const getChatType = (type: ChatType) => {
+  if (type === "tldraw") {
+    return "Tldraw";
+  } else if (type === "advanced") {
+    return "Advanced";
+  } else if (type === "ella") {
+    return "Ella";
+  } else if (type === "rag") {
+    return "Rag";
+  } else if (type === "storm") {
+    return "Article";
+  } else {
+    return "Simple Chat";
+  }
+};
+
 const Chatcard = ({
   chat,
   uid,