fixed overflow on chat settings page

Author: cyanff

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-organize-imports"],
+  "organizeImportsSkipDestructiveCodeActions": true
+}

.prettierrc.yaml

@@ -116,7 +116,7 @@ export default function App() {
       }}
     >
       <div
-        className="flex h-screen bg-background text-sm text-neutral-100 antialiased lg:text-base"
+        className="flex h-screen overflow-hidden bg-background text-sm text-tx-primary antialiased lg:text-base"
         onDrop={handleDrop}
         onDragOver={(e) => {
           e.preventDefault();

src/renderer/src/app/app.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 export default function SettingsPage() {
   const [page, setPage] = useState<string>("chat");
   return (
-    <div className="flex h-full w-full rounded-xl">
+    <div className="flex h-full w-full rounded-xl ">
       {/*Sidebar*/}
       <div className="flex h-full w-56 shrink-0 flex-col space-y-2 overflow-hidden rounded-2xl bg-nav-primary px-3 py-8">
         <button
@@ -46,7 +46,7 @@ export default function SettingsPage() {
 
       {/*Settings Content*/}
 
-      <div className="grow overflow-hidden">
+      <div className="grow overflow-y-clip">
         {page === "chat" && <SettingsChat />}
         {page === "persona" && <SettingsPersona />}
         {page === "key" && <SettingsKeys />}

src/renderer/src/app/settings/settings.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import Combobox from "@/components/ui/combobox";
 import { Input } from "@/components/ui/input";
@@ -38,8 +39,8 @@ export default function SettingsChat() {
     formState: { errors }
   } = methods;
 
-  const providerNameAndValue = getProvidersNameAndValue();
   const [models, setModels] = useState<string[]>([]);
+  const providerNameAndValue = getProvidersNameAndValue();
   const selectedProvider = watch("provider");
 
   useEffect(() => {
@@ -70,11 +71,12 @@ export default function SettingsChat() {
       if (!selectedProvider) return;
       // Clear current model list
       setModels([]);
-      console.log("selected provider:", selectedProvider);
       // Fetch & set new model list based on the selected provider
       const res = await getProvider(selectedProvider).getModels();
       if (res.kind === "err") {
-        toast(`An error occured while fetching models list.`);
+        toast.error(
+          <span className="whitespace-pre-wrap">{`An error occured while fetching the model list for ${selectedProvider}.\nDid you enter an API key?`}</span>
+        );
         return;
       }
       setModels(res.value);
@@ -92,12 +94,12 @@ export default function SettingsChat() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center scroll-secondary space-y-5 overflow-hidden">
+    <div className="flex h-full w-full flex-col items-center justify-center space-y-5">
       <h1 className="text-2xl text-tx-primary font-bold tracking-wide">Chat Settings</h1>
       <FormProvider {...methods}>
-        <form className="overflow-hidden">
+        <form className="flex flex-col items-center space-y-5">
           {/* Card Wrapper*/}
-          <div className=" h-[30rem] w-[32rem] rounded-2xl border-y border-l border-line bg-container-primary py-3">
+          <div className="h-[32rem] w-[32rem] rounded-2xl border-y border-l border-line bg-container-primary py-3">
             <div className="scroll-secondary flex h-full w-full flex-col space-y-8 overflow-auto px-8 py-6">
               {/* Provider & Model Section */}
               <div className="space-y-3">
@@ -253,15 +255,10 @@ export default function SettingsChat() {
               </div>
             </div>
           </div>
+          <Button className="" onClick={handleSubmit(onSubmit)}>
+            Save
+          </Button>
         </form>
-
-        <button
-          className="flex items-center space-x-2 rounded-xl border border-line bg-action-primary hover:brightness-90 px-4 py-2 font-medium
-            text-tx-primary"
-          onClick={handleSubmit(onSubmit)}
-        >
-          Save
-        </button>
       </FormProvider>
     </div>
   );

src/renderer/src/app/settings/settings_chat.tsx

@@ -1,5 +1,6 @@
 import { DialogConfig, useApp } from "@/components/AppContext";
 import CardDeleted from "@/components/CardDeleted";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { queries } from "@/lib/queries";
@@ -213,19 +214,13 @@ export default function SettingsRecentlyDeleted() {
           </div>
         </div>
         <div className="flex flex-row flex-grow space-x-4 justify-end pr-8">
-          <button
-            className="flex items-center space-x-2 rounded-xl bg-transparent px-4 py-2 transition-colors duration-200 hover:brightness-90"
-            onClick={handleRestoreSelected}
-          >
+          <Button variant="secondary" className="flex items-center space-x-2" onClick={handleRestoreSelected}>
             <span className="font-medium text-tx-primary text-sm">Restore</span>
-          </button>
-          <button
-            className="flex items-center space-x-2 rounded-xl bg-action-primary px-4 py-2 transition ease-out duration-200 hover:brightness-90"
-            onClick={handleDeleteSelected}
-          >
+          </Button>
+          <Button className="flex items-center space-x-2" onClick={handleDeleteSelected}>
             <TrashIcon className="size-5 text-tx-primary" />
             <span className="font-medium text-tx-primary text-sm">Delete</span>
-          </button>
+          </Button>
         </div>
       </div>
 

src/renderer/src/app/settings/settings_deleted.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -89,13 +90,7 @@ export default function SettingsKeys() {
         </div>
       </div>
 
-      <button
-        className="flex items-center space-x-2 rounded-md border border-line transition bg-action-primary hover:rbrightness-90 px-4 py-2
-          font-medium text-tx-primary"
-        onClick={handleSubmit}
-      >
-        Save
-      </button>
+      <Button onClick={handleSubmit}>Save</Button>
     </div>
   );
 }

src/renderer/src/app/settings/settings_keys.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 import { useApp } from "@/components/AppContext";
+import { Button } from "@/components/ui/button";
 import { queries } from "@/lib/queries";
 import { PersonaBundle, PersonaFormData } from "@shared/types";
 import { toast } from "sonner";
@@ -212,13 +213,10 @@ export default function SettingsPersona() {
           })}
         </div>
       </div>
-      <button
-        className="flex items-center space-x-2 rounded-md bg-action-primary px-4 py-2 transition hover:brightness-90"
-        onClick={handleNew}
-      >
+      <Button className="flex items-center space-x-2" onClick={handleNew}>
         <UserPlusIcon className="size-5 text-tx-primary" />
         <span className="font-medium text-tx-primary">New</span>
-      </button>
+      </Button>
     </div>
   );
 }

src/renderer/src/app/settings/settings_persona.tsx

@@ -40,7 +40,7 @@ export default function ChatBar({
   return (
     <div className={className}>
       <div className="flex h-fit w-fit items-center ">
-        <Typing className="mb-1 ml-4 mt-1" name="Saku" typing={isTyping} />
+        <Typing className="mb-1 ml-4 mt-1" name={cardData.character.name} typing={isTyping} />
       </div>
       <div className="flex min-h-fit w-full shrink-0 space-x-2 overflow-auto rounded-3xl bg-input-primary p-4">
         <button className="flex size-7 items-center justify-center">

src/renderer/src/components/ChatBar.tsx

@@ -65,7 +65,7 @@ export default function SideBar({ page, setPage }: SideBarProps) {
       <div className="flex flex-col">
         <DropdownMenu>
           <DropdownMenuTrigger className="outline-none">
-            <Button size="icon" className={"m-2 size-16 rounded-xl hover:bg-accent"}>
+            <Button variant="ghost" size="icon" className={"m-2 size-16 rounded-xl"}>
               <PlusCircleIcon className="text-tx-secondary size-8" />
             </Button>
           </DropdownMenuTrigger>
@@ -88,13 +88,17 @@ export default function SideBar({ page, setPage }: SideBarProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Button className="m-2 size-16 rounded-xl hover:bg-accent " onClick={() => setPage("chats")}>
+        <Button variant="ghost" className="m-2 size-16 rounded-xl" onClick={() => setPage("chats")}>
           <ChatBubbleLeftRightIcon className="text-tx-secondary size-8" />
         </Button>
-        <Button className="m-2 size-16 rounded-xl hover:bg-accent" onClick={() => setPage("collections")}>
+        <Button
+          variant="ghost"
+          className="m-2 size-16 rounded-xl hover:bg-accent"
+          onClick={() => setPage("collections")}
+        >
           <UserGroupIcon className="text-tx-secondary size-8" />
         </Button>
-        <Button className="m-2 size-16 rounded-xl hover:bg-accent" onClick={() => setPage("settings")}>
+        <Button variant="ghost" className="m-2 size-16 rounded-xl hover:bg-accent" onClick={() => setPage("settings")}>
           <Cog8ToothIcon className="text-tx-secondary size-8" />
         </Button>
       </div>
@@ -105,6 +109,7 @@ export default function SideBar({ page, setPage }: SideBarProps) {
       {/* Bottom Button Group*/}
       <div className="flex flex-col space-y-2">
         <Button
+          variant="ghost"
           size="icon"
           className="mx-2 size-12 rounded-xl"
           onClick={() => {
@@ -116,6 +121,7 @@ export default function SideBar({ page, setPage }: SideBarProps) {
         </Button>
         <Button
           size="icon"
+          variant="ghost"
           className="mx-2 size-12 rounded-xl"
           onClick={() => {
             toast.info("Docs are coming soon™!");

src/renderer/src/components/SideBar.tsx

@@ -8,14 +8,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-transparent text-tx-secondary hover:brightness-90",
-        secondary: "bg-action-secondary text-tx-secondary hover:text-tx-primary bg-transparent",
+        default: "bg-action-primary text-tx-primary hover:brightness-90 text-base",
+        secondary: "text-tx-secondary hover:text-tx-primary bg-transparent",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-tx-primary bg-transparent text-tx-secondary",
         link: "text-tx-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2",
+        default: "h-10 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9"

src/renderer/src/components/ui/button.tsx

@@ -45,9 +45,8 @@ async function getModels(): Promise<Result<string[], Error>> {
     Authorization: `Bearer ${key}`
   };
 
-  const modelsRes = await window.api.xfetch.get(url, headers, { timeout: 2000 });
+  const modelsRes = await window.api.xfetch.get(url, headers, { timeout: 5000 });
   if (modelsRes.kind == "err") {
-    console.log("Error getting models:", modelsRes.error.message);
     return modelsRes;
   }
 

src/renderer/src/lib/provider/together_ai.ts

@@ -348,6 +348,7 @@
   --popover-foreground: var(--tx-primary);
   --radius: 0.8rem;
   font-weight: 480;
+  overflow-y : hidden
 }
 
 .scroll-primary::-webkit-scrollbar {