feat(app): switch to useChat hook

src/components/MessageInputActions/Attach.tsx

@@ -8,20 +8,11 @@ import {
 import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { File as FileType } from '../ChatWindow';
+import { useChat } from '@/lib/hooks/useChat';
+
+const Attach = ({ showText }: { showText?: boolean }) => {
+  const { files, setFiles, setFileIds, fileIds } = useChat();
 
-const Attach = ({
-  fileIds,
-  setFileIds,
-  showText,
-  files,
-  setFiles,
-}: {
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  showText?: boolean;
-  files: FileType[];
-  setFiles: (files: FileType[]) => void;
-}) => {
   const [loading, setLoading] = useState(false);
   const fileInputRef = useRef<any>();
 

src/components/MessageInputActions/AttachSmall.tsx

@@ -8,18 +8,11 @@ import {
 import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { File as FileType } from '../ChatWindow';
+import { useChat } from '@/lib/hooks/useChat';
+
+const AttachSmall = () => {
+  const { files, setFiles, setFileIds, fileIds } = useChat();
 
-const AttachSmall = ({
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: FileType[];
-  setFiles: (files: FileType[]) => void;
-}) => {
   const [loading, setLoading] = useState(false);
   const fileInputRef = useRef<any>();
 

src/components/MessageInputActions/Focus.tsx

@@ -15,6 +15,7 @@ import {
 } from '@headlessui/react';
 import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
 import { Fragment } from 'react';
+import { useChat } from '@/lib/hooks/useChat';
 
 const focusModes = [
   {
@@ -55,13 +56,9 @@ const focusModes = [
   },
 ];
 
-const Focus = ({
-  focusMode,
-  setFocusMode,
-}: {
-  focusMode: string;
-  setFocusMode: (mode: string) => void;
-}) => {
+const Focus = () => {
+  const { focusMode, setFocusMode } = useChat();
+
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]">
       <PopoverButton

src/components/MessageInputActions/Optimization.tsx

@@ -7,6 +7,7 @@ import {
   Transition,
 } from '@headlessui/react';
 import { Fragment } from 'react';
+import { useChat } from '@/lib/hooks/useChat';
 
 const OptimizationModes = [
   {
@@ -34,13 +35,9 @@ const OptimizationModes = [
   },
 ];
 
-const Optimization = ({
-  optimizationMode,
-  setOptimizationMode,
-}: {
-  optimizationMode: string;
-  setOptimizationMode: (mode: string) => void;
-}) => {
+const Optimization = () => {
+  const { optimizationMode, setOptimizationMode } = useChat();
+
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <PopoverButton