feat: add animation to New Topic.

client/src/components/Input/NewConversationMenu/EndpointItems.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import EndpointItem from './EndpointItem';
+import EndpointItem from './EndpointItem.jsx';
 
 export default function EndpointItems({ endpoints, onSelect }) {
   return (

client/src/components/Input/NewConversationMenu/PresetItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
-import EditIcon from '../../svg/EditIcon';
-import TrashIcon from '../../svg/TrashIcon';
+import EditIcon from '../../svg/EditIcon.jsx';
+import TrashIcon from '../../svg/TrashIcon.jsx';
 import getIcon from '~/utils/getIcon';
 
 export default function PresetItem({ preset = {}, value, onSelect, onChangePreset, onDeletePreset }) {
@@ -56,7 +56,7 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
       /> */}
       <div className="flex w-4 flex-1" />
       <button
-        className="invisible m-0 p-2 mr-1 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
+        className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
         onClick={e => {
           e.preventDefault();
           onChangePreset(preset);

client/src/components/Input/NewConversationMenu/PresetItems.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PresetItem from './PresetItem';
+import PresetItem from './PresetItem.jsx';
 
 export default function PresetItems({ presets, onSelect, onChangePreset, onDeletePreset }) {
   return (

client/src/components/Input/NewConversationMenu/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import EditPresetDialog from '../../Endpoints/EditPresetDialog';
-import EndpointItems from './EndpointItems';
-import PresetItems from './PresetItems';
-import FileUpload from './FileUpload';
+import EditPresetDialog from '../../Endpoints/EditPresetDialog.jsx';
+import EndpointItems from './EndpointItems.jsx';
+import PresetItems from './PresetItems.jsx';
+import FileUpload from './FileUpload.jsx';
 import getIcon from '~/utils/getIcon';
 import manualSWR, { handleFileSelected } from '~/utils/fetchers';
 
@@ -17,7 +17,7 @@ import {
   DropdownMenuTrigger
 } from '../../ui/DropdownMenu.tsx';
 import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
-import DialogTemplate from '../../ui/DialogTemplate';
+import DialogTemplate from '../../ui/DialogTemplate.jsx';
 
 import store from '~/store';
 
@@ -110,9 +110,12 @@ export default function NewConversationMenu() {
           <Button
             variant="outline"
             // style={{backgroundColor: 'rgb(16, 163, 127)'}}
-            className={`absolute top-[0.25px] mb-0 ml-1 items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:ml-0 md:pl-1 md:disabled:top-1`}
+            className={`group relative mt-[-8px] mb-[-12px] ml-0 items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-[-12px] md:pl-1`}
           >
             {icon}
+            <span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-hover:max-w-[80px] group-hover:px-2 group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
+              New Topic
+            </span>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent

client/src/components/Input/index.jsx

@@ -5,7 +5,7 @@ import OpenAIOptions from './OpenAIOptions';
 import ChatGPTOptions from './ChatGPTOptions';
 import BingAIOptions from './BingAIOptions';
 // import BingStyles from './BingStyles';
-import NewConversationMenu from './Endpoints/NewConversationMenu';
+import NewConversationMenu from './NewConversationMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useMessageHandler } from '../../utils/handleSubmit';
@@ -139,7 +139,7 @@ export default function TextChat({ isSearchView = false }) {
           <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
             <div className="relative flex h-full flex-1 md:flex-col">
               <div
-                className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
+                className={`relative flex flex-grow flex-row rounded-md border border-black/10 ${
                   disabled ? 'bg-gray-100' : 'bg-white'
                 } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
                   disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
@@ -160,7 +160,7 @@ export default function TextChat({ isSearchView = false }) {
                   onCompositionEnd={handleCompositionEnd}
                   placeholder={getPlaceholderText()}
                   disabled={disabled || isNotAppendable}
-                  className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
+                  className="m-0 flex h-auto max-h-52 flex-1 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-12 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-2"
                 />
                 <SubmitButton
                   submitMessage={submitMessage}