improvements to chat

Author: modelorona

frontend/src/app.tsx

@@ -20,8 +20,8 @@ import { Route, Routes } from "react-router-dom";
 import { Notifications } from './components/notifications';
 import { PrivateRoute, PublicRoutes, getRoutes } from './config/routes';
 import { NavigateToDefault } from "./pages/chat/default-chat-route";
-import { useAppDispatch, useAppSelector } from "./store/hooks";
-import { useCallback } from "react";
+import { useAppSelector } from "./store/hooks";
+import { useCallback, useEffect } from "react";
 import { useUpdateSettingsMutation } from "./generated/graphql";
 import { optInUser, optOutUser } from "./config/posthog";
 

frontend/src/components/search.tsx

@@ -29,7 +29,7 @@ type ISearchInputProps = {
 
 export const SearchInput: FC<ISearchInputProps> = ({ search, setSearch, placeholder, inputProps, testId }) => {
     return (<div className="relative grow group/search-input" data-testid={testId}>
-        <Input value={search} setValue={setSearch} placeholder={placeholder} inputProps={{ autoFocus: true, ...inputProps, }} />
+        <Input value={search} setValue={setSearch} placeholder={placeholder} inputProps={{ autoFocus: true, ...inputProps, className: "w-full" }} />
         {cloneElement(Icons.Search, {
             className: "w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 stroke-gray-500 dark:stroke-neutral-500 cursor-pointer transition-all hover:scale-110 rounded-full group-hover/search-input:opacity-10",
         })}

frontend/src/pages/chat/chat.tsx

@@ -76,7 +76,7 @@ const TablePreview: FC<{ type: string, data: TableData, text: string }> = ({ typ
         setShowSQL(status => !status);
     }, []);
 
-    return <div className="flex flex-col w-full group/table-preview gap-2 relative">
+    return <div className="flex flex-col w-[calc(100%-50px)] group/table-preview gap-2 relative">
         <div className="absolute -top-3 -left-3 opacity-0 group-hover/table-preview:opacity-100 transition-all z-[1]">
             <ActionButton containerClassName="w-8 h-8" className="w-5 h-5" icon={cloneElement(showSQL ? Icons.Tables : Icons.Code, {
                 className: "w-6 h-6 stroke-white",
@@ -132,7 +132,6 @@ export const ChatPage: FC = () => {
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const schema = useAppSelector(state => state.database.schema);
     const [currentSearchIndex, setCurrentSearchIndex] = useState<number>();
-    const dispatch = useAppDispatch();
 
     const loading = useMemo(() => {
         return getAIChatLoading || getAIModelsLoading;
@@ -487,6 +486,7 @@ export const ChatPage: FC = () => {
                                                         : <div className="pl-4" />}
                                                     <div className={classNames("text-neutral-800 dark:text-neutral-300 px-4 py-2 rounded-xl whitespace-pre-wrap", {
                                                         "bg-neutral-600/5 dark:bg-[#2C2F33]": chat.isUserInput,
+                                                        "-ml-2": !chat.isUserInput && chats[i-1]?.isUserInput,
                                                     })}>
                                                         {chat.Text}
                                                     </div>
@@ -531,7 +531,7 @@ export const ChatPage: FC = () => {
                     <Input value={query} setValue={setQuery} placeholder="Talk to me..." onSubmit={handleSubmitQuery} inputProps={{
                         disabled: disableChat,
                         onKeyUp: handleKeyUp,
-                        autoFocus: true,
+                        ref: (input) => input?.focus()
                     }} />
                 </div>
                 {