UI Improvement and Bug fixes

package.json

@@ -23,6 +23,7 @@
     "@clerk/themes": "1.7.4",
     "@dqbd/tiktoken": "1.0.3",
     "@ducanh2912/next-pwa": "^10.0.0",
+    "@hookform/resolvers": "^3.3.2",
     "@libsql/client": "0.3.1",
     "@liveblocks/client": "1.1.6",
     "@liveblocks/react": "1.1.6",
@@ -44,12 +45,14 @@
     "@radix-ui/react-slider": "1.1.2",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-switch": "1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "1.0.3",
     "@radix-ui/react-tooltip": "1.0.6",
     "@sentry/nextjs": "7.61.0",
     "@t3-oss/env-core": "0.3.1",
     "@t3-oss/env-nextjs": "0.3.1",
     "@tanstack/react-query": "4.29.25",
+    "@tldraw/tldraw": "2.0.0-alpha.18",
     "@typeform/embed-react": "2.31.0",
     "@types/node": "18.15.11",
     "@types/react": "18.0.33",
@@ -75,12 +78,15 @@
     "langsmith": "0.0.48",
     "lucide-react": "0.224.0",
     "next": "13.5.5",
+    "next-usequerystate": "^1.13.1",
     "openai": "^4.17.4",
     "prettier": "3.0.0",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-div-100vh": "0.7.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
+    "react-hook-form": "7.48.2",
     "react-intersection-observer": "9.5.2",
     "react-markdown": "8.0.7",
     "react-mic": "12.4.6",
@@ -91,7 +97,7 @@
     "tailwind-merge": "1.12.0",
     "tailwindcss-animate": "1.0.5",
     "typescript": "5.0.3",
-    "zod": "3.21.4",
+    "zod": "^3.22.4",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
@@ -108,6 +114,7 @@
     "postcss": "8.4.21",
     "pwa-asset-generator": "^6.3.1",
     "tailwindcss": "3.3.1",
+    "tailwindcss-safe-area": "^0.4.1",
     "ts-node": "10.9.1",
     "webpack": "^5.89.0"
   }

public/manifest.json

@@ -31,8 +31,8 @@
   ],
   "theme_color": "#03050A",
   "background_color": "#03050A",
-  "start_url": "/",
+  "start_url": "/dashboard",
   "scope": ".",
   "display": "standalone",
   "orientation": "portrait"
-}
+}

src/app/(auth)/organization-profile/[[...organization-profile]]/page.tsx

@@ -0,0 +1,9 @@
+import { OrganizationProfile } from "@clerk/nextjs";
+
+export default function OrganizationProfilePage() {
+  return (
+    <div className="grid h-screen place-items-center">
+      <OrganizationProfile routing="path" path="/organization-profile" />
+    </div>
+  );
+}

src/app/(auth)/user-profile/[[...user-profile]]/page.tsx

@@ -0,0 +1,9 @@
+import { UserProfile } from "@clerk/nextjs";
+
+const UserProfilePage = () => (
+  <div className="grid h-screen place-items-center">
+    <UserProfile path="/user-profile" routing="hash" />
+  </div>
+);
+
+export default UserProfilePage;

src/app/api/chatmodel/[chatid]/route.ts

@@ -2,15 +2,13 @@ import { StreamingTextResponse, LangChainStream, nanoid } from "ai";
 import { eq } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { chats } from "@/lib/db/schema";
-import { CHAT_COMPLETION_CONTENT, ChatEntry, ChatLog } from "@/lib/types";
+import { ChatEntry, ChatLog } from "@/lib/types";
 import { systemPrompt } from "@/utils/prompts";
 import {
-  chooseModel,
   jsonToLangchain,
   openAIChatModel,
   OPEN_AI_MODELS,
 } from "@/utils/apiHelper";
-import { NextResponse } from "next/server";
 import { env } from "@/app/env.mjs";
 import { auth } from "@clerk/nextjs";
 import axios from "axios";
@@ -27,9 +25,9 @@ export async function POST(
   console.log("orgSlug", orgSlug);
 
   const _chat = body.messages;
-  const isFast = body.isFast;
   let orgId = "";
   orgId = body.orgId;
+  const userId = body.userId;
   const url = request.url;
   // getting main url
   const urlArray = url.split("/");
@@ -45,29 +43,6 @@ export async function POST(
   const msgs = jsonToLangchain(_chat, systemPrompt);
 
   const model = OPEN_AI_MODELS.gpt4Turbo;
-  const { error } = chooseModel(isFast, msgs, systemPrompt);
-
-  if (error) {
-    const msg = {
-      content: CHAT_COMPLETION_CONTENT,
-      role: "assistant",
-    };
-    _chat.push(msg); // pushing the final message to identify that the chat is completed
-    await db
-      .update(chats)
-      .set({
-        messages: JSON.stringify({ log: _chat }),
-        updatedAt: new Date(),
-      })
-      .where(eq(chats.id, Number(id)))
-      .run();
-    return NextResponse.json(
-      { ...msg },
-      {
-        status: 400,
-      },
-    );
-  }
 
   const postToAlgolia = ({
     chats,
@@ -131,6 +106,7 @@ export async function POST(
             .update(chats)
             .set({
               messages: JSON.stringify({ log: _chat } as ChatLog),
+              creator: userId,
             })
             .where(eq(chats.id, Number(id)))
             .run();

src/app/api/chats/[chatid]/route.tsx

@@ -20,5 +20,5 @@ export async function GET(
   const msg = fetchedChat[0]?.messages;
   const chatlog = JSON.parse(msg as string) as ChatLog;
 
-  return NextResponse.json({ chats: chatlog.log });
+  return NextResponse.json({ chats: chatlog ? chatlog.log : [] });
 }

src/app/api/generateNewChatId/[org_id]/route.ts

@@ -8,6 +8,9 @@ export async function POST(
   // const body = await request.json();
   // const org_id = body.org_id;
   console.log("getting it in the route", params.params.org_id);
+  const body = await request.json();
+  const chatType = body.type;
+  const title = body.title;
 
   const id = params.params.org_id;
 
@@ -19,6 +22,8 @@ export async function POST(
     .insert(chats)
     .values({
       user_id: id,
+      type: chatType,
+      title: title,
     })
     .run();
   console.log("generated New Chat id", data.toJSON());

src/app/api/getPaginatedChats/[org_id]/route.ts

@@ -2,6 +2,9 @@ import { db } from "@/lib/db";
 import { chats } from "@/lib/db/schema";
 import { desc, eq, ne, and } from "drizzle-orm";
 import { NextResponse } from "next/server";
+import * as z from "zod";
+
+const chatquery = z.enum(["me", "org"]);
 
 export async function GET(
   request: Request,
@@ -10,6 +13,8 @@ export async function GET(
   // handle if org_id is undefined or null
   const { searchParams } = new URL(request.url);
   let page = Number(searchParams.get("page"));
+  let userId = searchParams.get("userId");
+  let chatsQuery = chatquery.parse(searchParams.get("chats"));
   const org_id = params.params.org_id;
 
   if (page === null || isNaN(page)) {
@@ -18,17 +23,45 @@ export async function GET(
   }
   console.log("page", page);
   console.log("orgId", org_id);
+  console.log("userId", userId);
+  console.log("chats", chatsQuery);
   // need to improve the logic
   const offset = 25;
   const skip = offset * page;
+  let orgConversations: any;
+  if (chatsQuery === "me") {
+    orgConversations = await db
+      .select()
+      .from(chats)
+      .where(
+        and(
+          eq(chats.user_id, String(org_id)),
+          ne(chats.messages, "NULL"),
+          eq(chats.creator, String(userId)),
+        ),
+      )
+      .orderBy(desc(chats.updatedAt))
+      .offset(skip)
+      .limit(25)
+      .all();
+  } else {
+    orgConversations = await db
+      .select()
+      .from(chats)
+      .where(and(eq(chats.user_id, String(org_id)), ne(chats.messages, "NULL")))
+      .orderBy(desc(chats.updatedAt))
+      .offset(skip)
+      .limit(25)
+      .all();
+  }
 
-  let orgConversations = await db
-    .select()
-    .from(chats)
-    .where(and(eq(chats.user_id, String(org_id)), ne(chats.messages, "NULL")))
-    .orderBy(desc(chats.updatedAt))
-    .offset(skip)
-    .limit(25)
-    .all();
+  // let orgConversations = await db
+  //   .select()
+  //   .from(chats)
+  //   .where(and(eq(chats.user_id, String(org_id)), ne(chats.messages, "NULL"), eq(chats.creator, String(userId))))
+  //   .orderBy(desc(chats.updatedAt))
+  //   .offset(skip)
+  //   .limit(25)
+  //   .all();
   return NextResponse.json({ conversations: orgConversations });
 }

src/app/api/tldraw/[chatId]/route.ts

@@ -0,0 +1,38 @@
+import { db } from "@/lib/db";
+import { chats } from "@/lib/db/schema";
+import { Message, nanoid } from "ai";
+import { eq } from "drizzle-orm";
+
+export async function POST(
+  req: Request,
+  params: { params: { chatId: string } },
+) {
+  const { chatId } = params.params;
+  const body = await req.json();
+  const content = body.content;
+  const name = body.name;
+  console.log("name", name);
+
+  const _chat = [
+    {
+      content,
+      createdAt: new Date(),
+      id: nanoid(),
+      role: "user",
+      name,
+    } as Message,
+  ];
+
+  console.log("chatId", _chat);
+
+  await db
+    .update(chats)
+    .set({
+      messages: JSON.stringify({ log: _chat }),
+      updatedAt: new Date(),
+    })
+    .where(eq(chats.id, Number(chatId)))
+    .run();
+
+  return new Response(JSON.stringify({ success: true }));
+}

src/app/usr/[uid]/chat/[chatid]/page.tsx → src/app/dashboard/[slug]/chat/[chatid]/page.tsx

@@ -1,4 +1,4 @@
-import { ChatLog } from "@/lib/types";
+import { ChatLog, ChatType } from "@/lib/types";
 import { db } from "@/lib/db";
 import { redirect } from "next/navigation";
 import { Chat as ChatSchema, chats } from "@/lib/db/schema";
@@ -21,12 +21,7 @@ export default async function Page({
   const fullname = ((user?.firstName as string) +
     " " +
     user?.lastName) as string;
-  if (
-    !params.uid ||
-    !params.chatid ||
-    !userId ||
-    sessionClaims?.org_slug !== params.uid
-  ) {
+  if (!sessionClaims?.org_slug) {
     console.log('redirecting to "/"');
     redirect("/");
   }
@@ -58,12 +53,13 @@ export default async function Page({
         orgId={sessionClaims.org_id ? sessionClaims.org_id : ""}
         chat={chatlog.log}
         chatId={params.chatid}
-        uid={userId}
+        uid={userId as string}
         username={fullname}
         chatAvatarData={fetchedChat[0]}
-        org_slug={params.uid} // here uid contains org_slug
+        org_slug={sessionClaims?.org_slug} // here uid contains org_slug
         chatTitle={fetchedChat[0]?.title as string}
         imageUrl={fetchedChat[0]?.image_url as string}
+        type={fetchedChat[0]?.type as ChatType}
       ></RoomWrapper>
     </AblyChannelProvider>
   );