coderabbit review fix

Author: Yash094

apps/dashboard/src/@/api/support.ts

@@ -220,7 +220,8 @@ export async function getSupportTicket(
     conversation.messages = messages;
   } else {
     // Don't throw error, just leave messages empty
-    const _errorText = await messagesResponse.text();
+    const errorText = await messagesResponse.text();
+    console.error("Failed to fetch messages:", errorText);
     conversation.messages = [];
   }
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportAIChatCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { BotIcon } from "lucide-react";
 import { useState } from "react";
+import { Input } from "@/components/ui/input";
 
 export function SupportAIChatCard({
   _authToken,
@@ -16,8 +17,8 @@ export function SupportAIChatCard({
   return (
     <div className="rounded-lg border bg-card p-6 mb-6">
       <div className="flex items-center gap-3 mb-4">
-        <span className="inline-block size-8 rounded-full bg-blue-900 flex items-center justify-center">
-          <BotIcon className="text-lg text-white" />
+        <span className="inline-block size-8 rounded-full bg-primary flex items-center justify-center">
+          <BotIcon className="text-lg text-primary-foreground" />
         </span>
         <div>
           <div className="font-semibold">Ask AI for support</div>
@@ -28,14 +29,14 @@ export function SupportAIChatCard({
         </div>
       </div>
       <div className="mb-4">
-        <div className="rounded bg-[#181C24] px-4 py-3 text-sm text-white">
-          I’ll help you troubleshoot. If I can’t fix it, I’ll pass it to our
+        <div className="rounded bg-muted px-4 py-3 text-sm text-foreground">
+          I'll help you troubleshoot. If I can't fix it, I'll pass it to our
           support team.
         </div>
       </div>
       <div className="flex items-center gap-2">
-        <input
-          className="flex-1 rounded-md border px-3 py-2 bg-background text-white placeholder:text-muted-foreground"
+        <Input
+          className="flex-1"
           onChange={(e) => setMessage(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey && message.trim()) {
@@ -47,7 +48,7 @@ export function SupportAIChatCard({
           value={message}
         />
         <button
-          className="bg-[#2663EB] hover:bg-[#2663EB]/90 text-white rounded-md px-4 py-2"
+          className="bg-primary hover:bg-primary/90 text-primary-foreground rounded-md px-4 py-2"
           disabled={!message.trim()}
           onClick={() => onStartChat(message)}
           type="button"

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCasesClient.tsx

@@ -12,7 +12,6 @@ import { Reasoning } from "@/components/chat/Reasoning";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SupportAIChatCard } from "./SupportAIChatCard";
 import { SupportTabs } from "./SupportTabs";
 import { SupportTicketForm } from "./SupportTicketForm";
@@ -52,14 +51,11 @@ export default function SupportCasesClient({
     undefined,
   );
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const [_inputFocused, _setInputFocusedd] = useState(false);
-  const _router = useDashboardRouter();
   const replySectionRef = useRef<HTMLDivElement>(null);
 
   // Form states
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [productLabel, setProductLabel] = useState("");
-  const [_isSubmittingForm, _setIsSubmittingFormm] = useState(false);
 
   const selectedCase =
     selectedCaseDetails || tickets.find((c) => c.id === selectedCaseId);
@@ -174,7 +170,8 @@ export default function SupportCasesClient({
       if (ticketDetails) {
         setSelectedCaseDetails(ticketDetails);
       }
-    } catch (_error) {
+    } catch (error) {
+      console.error("Failed to load ticket details:", error);
       toast.error("Failed to load ticket details");
     } finally {
       setIsLoadingCaseDetails(false);
@@ -229,7 +226,8 @@ export default function SupportCasesClient({
       } finally {
         setIsLoadingCaseDetails(false);
       }
-    } catch (_error) {
+    } catch (error) {
+      console.error("Failed to send reply:", error);
       toast.error("Failed to send reply. Please try again.");
     } finally {
       setIsSubmittingReply(false);
@@ -394,7 +392,8 @@ export default function SupportCasesClient({
           timestamp: new Date().toISOString(),
         },
       ]);
-    } catch (_error) {
+    } catch (error) {
+      console.error("Error in handleStartChat:", error);
       setChatMessages([
         initialAIMsg,
         userMsg,
@@ -438,7 +437,8 @@ export default function SupportCasesClient({
           timestamp: new Date().toISOString(),
         },
       ]);
-    } catch (_error) {
+    } catch (error) {
+      console.error("Error in handleChatSend:", error);
       setChatMessages((msgs) => [
         ...msgs.slice(0, -1),
         {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTabs.tsx

@@ -32,24 +32,24 @@ export function SupportTabs({
     <div className="flex items-center gap-4 mb-6">
       {/* Search Bar */}
       <div className="relative">
-        <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#737373] w-4 h-4" />
+        <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
         <Input
-          className="pl-10 w-80 bg-[#0A0A0A] border-[#1F1F1F] text-white placeholder:text-[#737373] focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-[#2663EB]"
+          className="pl-10 w-80 bg-background border-border text-foreground placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-primary"
           onChange={(e) => onSearchChange(e.target.value)}
           placeholder="Search cases..."
           value={searchQuery}
         />
       </div>
 
       {/* Tab Buttons */}
-      <div className="grid w-fit grid-cols-3 bg-[#0A0A0A] border border-[#1F1F1F] p-1 rounded-lg">
+      <div className="grid w-fit grid-cols-3 bg-background border border-border p-1 rounded-lg">
         {tabs.map((tab) => (
           <Button
             className={cn(
               "h-8 px-3 py-1 font-medium text-sm transition-colors rounded-md",
               activeTab === tab.id
-                ? "bg-[#1F1F1F] text-white"
-                : "text-[#737373] hover:text-white",
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:text-foreground",
             )}
             key={tab.id}
             onClick={() => onTabChange(tab.id)}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx

@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { createSupportTicket } from "@/api/support";
+import type { Team } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { SupportForm_SelectInput } from "./shared/SupportForm_SelectInput";
@@ -98,7 +99,7 @@ function ProductAreaSelection(props: {
 }
 
 interface SupportTicketFormProps {
-  team: any;
+  team: Team;
   productLabel: string;
   setProductLabel: (val: string) => void;
   onSuccess?: () => void;
@@ -187,12 +188,7 @@ export function SupportTicketForm({
       />
       {/* Submit Buttons */}
       <div className="flex justify-end gap-3 pt-2">
-        <Button
-          type="submit"
-          className="bg-[#2663EB] hover:bg-[#2663EB]/80 text-white transition-opacity"
-          size="sm"
-          disabled={isSubmittingForm}
-        >
+        <Button type="submit" size="sm" disabled={isSubmittingForm}>
           {isSubmittingForm ? (
             <>
               <LoaderCircleIcon className="animate-spin w-4 h-4 mr-2 inline" />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/account/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { DescriptionInput } from "../../shared/SupportForm_DescriptionInput";
 import { SupportForm_SelectInput } from "../../shared/SupportForm_SelectInput";
@@ -11,6 +13,7 @@ const ACCOUNT_PROBLEM_AREAS = [
 
 export function AccountSupportForm() {
   const [problemArea, setProblemArea] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
 
   return (
     <>
@@ -23,7 +26,9 @@ export function AccountSupportForm() {
         required={true}
         value={problemArea}
       />
-      {problemArea && <DescriptionInput />}
+      {problemArea && (
+        <DescriptionInput value={description} onChange={setDescription} />
+      )}
     </>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/AffectedAreaInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { DescriptionInput } from "../../shared/SupportForm_DescriptionInput";
 import { SupportForm_SelectInput } from "../../shared/SupportForm_SelectInput";
@@ -9,6 +11,9 @@ const AFFECTED_AREAS = ["Dashboard", "Application"];
 export const AffectedAreaInput = () => {
   const [selectedAffectedArea, setSelectedAffectedArea] = useState<string>("");
   const [selectedSDK, setSelectedSDK] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [sdkDescription, setSdkDescription] = useState<string>("");
+
   return (
     <>
       <SupportForm_SelectInput
@@ -47,12 +52,15 @@ export const AffectedAreaInput = () => {
                   inputType="url"
                   required={false}
                 />
-                <DescriptionInput />
+                <DescriptionInput
+                  value={sdkDescription}
+                  onChange={setSdkDescription}
+                />
               </>
             )}
           </>
         ) : (
-          <DescriptionInput />
+          <DescriptionInput value={description} onChange={setDescription} />
         ))}
     </>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx

@@ -34,6 +34,11 @@ const OSSelect = () => {
   );
 };
 
+const DescriptionInputWrapper = () => {
+  const [description, setDescription] = useState<string>("");
+  return <DescriptionInput value={description} onChange={setDescription} />;
+};
+
 const PROBLEM_AREAS: ProblemAreaItem[] = [
   {
     component: <AffectedAreaInput />,
@@ -65,7 +70,7 @@ const PROBLEM_AREAS: ProblemAreaItem[] = [
           inputType="url"
           required={false}
         />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Connect SDKs",
@@ -75,7 +80,7 @@ const PROBLEM_AREAS: ProblemAreaItem[] = [
       <>
         <UnitySupportForm />
         <SDKVersionInput />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Unity SDK",
@@ -98,7 +103,7 @@ const PROBLEM_AREAS: ProblemAreaItem[] = [
           inputType="text"
           required={false}
         />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: ".NET SDK",

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/contracts/index.tsx

@@ -61,14 +61,19 @@ const ContractAffectedAreaInput = () => {
   );
 };
 
+const DescriptionInputWrapper = () => {
+  const [description, setDescription] = useState<string>("");
+  return <DescriptionInput value={description} onChange={setDescription} />;
+};
+
 const CONTRACT_PROBLEM_AREAS: ProblemAreaItem[] = [
   {
     component: (
       <>
         <NetworkInput />
         <ContractTypeInput />
         <ContractAffectedAreaInput />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Deploying a contract",
@@ -79,7 +84,7 @@ const CONTRACT_PROBLEM_AREAS: ProblemAreaItem[] = [
         <NetworkInput />
         <ContractAddressInput />
         <ContractTypeInput />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Contract verification",
@@ -91,23 +96,23 @@ const CONTRACT_PROBLEM_AREAS: ProblemAreaItem[] = [
         <ContractAddressInput />
         <ContractFunctionInput />
         <ContractAffectedAreaInput />
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Calling a function in my contract",
   },
   {
     component: (
       <>
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Developing a custom contract",
   },
   {
     component: (
       <>
-        <DescriptionInput />
+        <DescriptionInputWrapper />
       </>
     ),
     label: "Other",

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx

@@ -15,6 +15,8 @@ const ENGINE_PROBLEM_AREAS = [
 export function EngineSupportForm() {
   const [selectedEngineType, setSelectedEngineType] = useState<string>("");
   const [problemArea, setProblemArea] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+
   return (
     <>
       <SupportForm_SelectInput
@@ -47,7 +49,7 @@ export function EngineSupportForm() {
                 placeholder="https://your-engine-url.com"
                 required={true}
               />
-              <DescriptionInput />
+              <DescriptionInput value={description} onChange={setDescription} />
             </>
           )}
         </>