feat: chat input dialog

apps/masterbots.ai/app/c/[chatbot]/[threadId] /page.tsx

@@ -12,6 +12,7 @@ import {
 import { createSupabaseServerClient } from '@/services/supabase'
 import { ThreadList } from '@/components/shared/thread-list'
 import { NewChatInput } from '@/components/routes/c/new-chat'
+import { ChatSearchInput } from '@/components/routes/c/chat-search-input'
 
 export default async function ChatListPage({
   params,
@@ -81,9 +82,9 @@ export default async function ChatListPage({
     userPreferencesPrompts
   )
 
-  console.log('currentThread', currentThread)
   return (
     <>
+      {/* <ChatSearchInput /> */}
       <ThreadList
         initialThreads={threads}
         filter={{ slug: userProfile.slug, chatbotName: chatbot.name }}

apps/masterbots.ai/app/globals.css

@@ -144,3 +144,7 @@
 .hide-buttons > button {
   display: none;
 }
+
+* {
+  outline: none;
+}

apps/masterbots.ai/components/routes/c/chat-input-new.tsx

@@ -3,7 +3,6 @@ import { type UseChatHelpers } from 'ai/react'
 import { Chatbot } from '@repo/mb-genql'
 import { Button } from '@/components/ui/button'
 import { PromptForm } from '@/components/routes/c/prompt-form'
-import { ButtonScrollToBottom } from '@/components/routes/c/button-scroll-to-bottom'
 import { IconRefresh, IconShare, IconStop } from '@/components/ui/icons'
 import { FooterText } from '@/components/layout/footer'
 import { ChatShareDialog } from '@/components/routes/c/chat-share-dialog'
@@ -26,8 +25,6 @@ export interface ChatInputProps
   chatbot?: Chatbot
   showReload?: boolean
   placeholder: string
-  isAtBottom?: boolean
-  scrollToBottom: () => void
   className?: string
   dialog?: boolean
 }
@@ -45,8 +42,6 @@ export function ChatInputNew({
   chatbot,
   placeholder,
   showReload = true,
-  isAtBottom,
-  scrollToBottom,
   className,
   dialog = false
 }: ChatInputProps) {
@@ -57,13 +52,9 @@ export function ChatInputNew({
       className={cn(
         'z-[2] fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% animate-in duration-300 ease-in-out dark:from-background/10 dark:from-10% dark:to-background/80',
         className,
-        !dialog ?? 'lg:pl-[250px] xl:pl-[300px]'
+        dialog ? null : 'lg:pl-[250px] xl:pl-[300px]'
       )}
     >
-      <ButtonScrollToBottom
-        isAtBottom={isAtBottom}
-        scrollToBottom={scrollToBottom}
-      />
       <div className="mx-auto ">
         {chatbot && showReload ? (
           <div className="flex items-center justify-center h-12">

apps/masterbots.ai/components/routes/c/chat-search-input.tsx

@@ -14,7 +14,7 @@ import { getCategory } from '@/services/hasura'
 export function ChatSearchInput({
   setThreads
 }: {
-  setThreads: React.Dispatch<React.SetStateAction<Thread[]>>
+  setThreads?: React.Dispatch<React.SetStateAction<Thread[]>>
 }) {
   const { chatbot } = useParams()
   const { activeCategory } = useSidebar()
@@ -43,24 +43,25 @@ export function ChatSearchInput({
 
   React.useEffect(() => {
     debounce(() => {
-      setThreads(prevState => {
-        // ? If there is no results on a search, we should keep the previous state
-        // ? and if not, the threads previous state before the search will be lost.
-        previousThread.current = !previousThread.current.length
-          ? prevState
-          : previousThread.current
-        const previousThreadState = previousThread.current
+      setThreads &&
+        setThreads(prevState => {
+          // ? If there is no results on a search, we should keep the previous state
+          // ? and if not, the threads previous state before the search will be lost.
+          previousThread.current = !previousThread.current.length
+            ? prevState
+            : previousThread.current
+          const previousThreadState = previousThread.current
 
-        if (!keyword) {
-          return previousThreadState
-        }
+          if (!keyword) {
+            return previousThreadState
+          }
 
-        return previousThreadState.filter((thread: Thread) =>
-          thread.messages[0]?.content
-            .toLowerCase()
-            .includes(keyword.toLowerCase())
-        )
-      })
+          return previousThreadState.filter((thread: Thread) =>
+            thread.messages[0]?.content
+              .toLowerCase()
+              .includes(keyword.toLowerCase())
+          )
+        })
     }, 230)()
   }, [keyword])
 

apps/masterbots.ai/components/routes/c/new-chat.tsx

@@ -14,7 +14,6 @@ export function NewChatInput({
   id,
   initialMessages,
   chatbot,
-  scrollToBottom = () => {},
   dialog = false
 }: NewChatInputProps) {
   const router = useRouter()
@@ -73,7 +72,6 @@ export function NewChatInput({
       messages={messages}
       placeholder={`Start New Chat with ${chatbot.name}`}
       reload={reload}
-      scrollToBottom={scrollToBottom}
       setInput={setInput}
       showReload={false}
       stop={stop}

apps/masterbots.ai/components/shared/thread-accordion.tsx

@@ -78,6 +78,7 @@ export function ThreadAccordion({
                   thread={thread}
                   question={p.userMessage.content}
                   copy={true}
+                  chat={chat}
                 />
               )}
             </AccordionTrigger>

apps/masterbots.ai/components/shared/thread-dialog.tsx

@@ -14,12 +14,12 @@ import { DialogProps } from '@radix-ui/react-dialog'
 import { NewChatInput } from '../routes/c/new-chat'
 import { convertMessage } from '@/lib/threads'
 
-export function ThreadDialog({ thread, chat }: ThreadDialogProps) {
+export function ThreadDialog({ thread, chat = false }: ThreadDialogProps) {
   const firstQuestion =
     thread.messages.find(m => m.role === 'user')?.content || 'not found'
   const firstResponse =
     thread.messages.find(m => m.role === 'assistant')?.content || 'not found'
-  console.log({ chat })
+
   return (
     <Dialog>
       <DialogTrigger>
@@ -38,7 +38,7 @@ export function ThreadDialog({ thread, chat }: ThreadDialogProps) {
       >
         <ThreadAccordion thread={thread} clientFetch={true} chat={chat} />
         {chat ? (
-          <DialogFooter className="bg-black">
+          <DialogFooter>
             <NewChatInput
               chatbot={thread.chatbot}
               initialMessages={thread.messages.map(convertMessage)}

apps/masterbots.ai/components/shared/thread-heading.tsx

@@ -35,7 +35,7 @@ export function ThreadHeading({
             )}
           >
             {question}
-            {!chat ? (
+            {chat ? null : (
               <>
                 <span className="opacity-50 text-[0.875rem]">by</span>
                 <AccountAvatar
@@ -44,7 +44,7 @@ export function ThreadHeading({
                   href={`/u/${thread.user.slug}`}
                 />
               </>
-            ) : null}
+            )}
           </div>
         </div>
         {copy ? <Shortlink /> : null}