From b10562b1e9974f724e7d73b44602939cb7f57eb4 Mon Sep 17 00:00:00 2001
From: Mike-FreeAI <145850829+Mike-FreeAI@users.noreply.github.com>
Date: Tue, 13 Aug 2024 14:30:45 +0100
Subject: [PATCH] Add Workspace wrapper to components

Implement mobile support for the application.

* **Workspace Component**: Update `Workspace` component to accept `children` prop and render `children` inside the component.
* **Layout Component**: Wrap the returned JSX with `Workspace` component and pass `databaseId` and `visibility` props to `Workspace`.
* **Sidebar Component**: Wrap the returned JSX with `Workspace` component and pass `databaseId` and `visibility` props to `Workspace`.
* **Chat Component**: Wrap the returned JSX with `Workspace` component and pass `databaseId` and `visibility` props to `Workspace`.
---
 apps/postgres-new/components/chat.tsx      | 544 +++++++++++----------
 apps/postgres-new/components/layout.tsx    |  12 +-
 apps/postgres-new/components/sidebar.tsx   |   5 +-
 apps/postgres-new/components/workspace.tsx |   7 +
 4 files changed, 290 insertions(+), 278 deletions(-)

diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 65b40f75..99e08bf3 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -24,7 +24,7 @@ import { AiIconAnimation } from './ai-icon-animation'
 import { useApp } from './app-provider'
 import ChatMessage from './chat-message'
 import SignInButton from './sign-in-button'
-import { useWorkspace } from './workspace'
+import { useWorkspace, Workspace } from './workspace'
 
 export function getInitialMessages(tables: TablesData): Message[] {
   return [
@@ -208,126 +208,181 @@ export default function Chat() {
   }))
 
   return (
-    <div ref={dropZoneRef} className="h-full flex flex-col items-stretch relative">
-      {isDraggingOver && (
-        <m.div
-          variants={{
-            hidden: { opacity: 0 },
-            show: { opacity: 0.25 },
-          }}
-          initial="hidden"
-          animate="show"
-          className="absolute inset-y-0 -inset-x-2 flex justify-center items-center bg-black rounded-md z-40"
-        />
-      )}
-      {dropZoneCursor}
-      <div className="flex-1 relative h-full min-h-0">
-        {isLoadingMessages || isLoadingSchema ? (
-          <div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10">
-            <Skeleton className="self-end h-10 w-1/3 rounded-3xl" />
-            <Skeleton className="self-start h-28 w-2/3 rounded-3xl" />
-            <Skeleton className="self-end h-10 w-2/3 rounded-3xl" />
-            <Skeleton className="self-start h-56 w-3/4 rounded-3xl" />
-            <Skeleton className="self-end h-10 w-1/2 rounded-3xl" />
-            <Skeleton className="self-start h-20 w-3/4 rounded-3xl" />
-          </div>
-        ) : isConversationStarted ? (
-          <div
-            className={cn(
-              'h-full flex flex-col items-center overflow-y-auto',
-              !isMessageAnimationComplete ? 'overflow-x-hidden' : undefined
-            )}
-            ref={scrollRef}
-          >
-            <m.div
-              key={databaseId}
-              className="flex flex-col gap-4 w-full max-w-4xl p-10"
-              variants={{
-                show: {
-                  transition: {
-                    staggerChildren: 0.01,
-                  },
-                },
-              }}
-              onAnimationStart={() => setIsMessageAnimationComplete(false)}
-              onAnimationComplete={() => setIsMessageAnimationComplete(true)}
-              initial="show"
-              animate="show"
+    <Workspace databaseId={databaseId} visibility="local">
+      <div ref={dropZoneRef} className="h-full flex flex-col items-stretch relative">
+        {isDraggingOver && (
+          <m.div
+            variants={{
+              hidden: { opacity: 0 },
+              show: { opacity: 0.25 },
+            }}
+            initial="hidden"
+            animate="show"
+            className="absolute inset-y-0 -inset-x-2 flex justify-center items-center bg-black rounded-md z-40"
+          />
+        )}
+        {dropZoneCursor}
+        <div className="flex-1 relative h-full min-h-0">
+          {isLoadingMessages || isLoadingSchema ? (
+            <div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10">
+              <Skeleton className="self-end h-10 w-1/3 rounded-3xl" />
+              <Skeleton className="self-start h-28 w-2/3 rounded-3xl" />
+              <Skeleton className="self-end h-10 w-2/3 rounded-3xl" />
+              <Skeleton className="self-start h-56 w-3/4 rounded-3xl" />
+              <Skeleton className="self-end h-10 w-1/2 rounded-3xl" />
+              <Skeleton className="self-start h-20 w-3/4 rounded-3xl" />
+            </div>
+          ) : isConversationStarted ? (
+            <div
+              className={cn(
+                'h-full flex flex-col items-center overflow-y-auto',
+                !isMessageAnimationComplete ? 'overflow-x-hidden' : undefined
+              )}
+              ref={scrollRef}
             >
-              {messages.map((message, i) => (
-                <ChatMessage
-                  key={message.id}
-                  message={message}
-                  isLast={i === messages.length - 1}
-                />
-              ))}
-              <AnimatePresence>
-                {isLoading && (
-                  <m.div
-                    className="-translate-x-8 flex gap-4 justify-start items-center"
-                    variants={{
-                      hidden: { opacity: 0 },
-                      show: { opacity: 1 },
+              <m.div
+                key={databaseId}
+                className="flex flex-col gap-4 w-full max-w-4xl p-10"
+                variants={{
+                  show: {
+                    transition: {
+                      staggerChildren: 0.01,
+                    },
+                  },
+                }}
+                onAnimationStart={() => setIsMessageAnimationComplete(false)}
+                onAnimationComplete={() => setIsMessageAnimationComplete(true)}
+                initial="show"
+                animate="show"
+              >
+                {messages.map((message, i) => (
+                  <ChatMessage
+                    key={message.id}
+                    message={message}
+                    isLast={i === messages.length - 1}
+                  />
+                ))}
+                <AnimatePresence>
+                  {isLoading && (
+                    <m.div
+                      className="-translate-x-8 flex gap-4 justify-start items-center"
+                      variants={{
+                        hidden: { opacity: 0 },
+                        show: { opacity: 1 },
+                      }}
+                      initial="hidden"
+                      animate="show"
+                      exit="hidden"
+                    >
+                      <m.div layoutId="ai-loading-icon">
+                        <AiIconAnimation loading />
+                      </m.div>
+                      {lastMessage &&
+                        (lastMessage.role === 'user' ||
+                          (lastMessage.role === 'assistant' && !lastMessage.content)) && (
+                          <m.div
+                            layout
+                            className="text-neutral-400 italic"
+                            variants={{
+                              hidden: { opacity: 0 },
+                              show: { opacity: 1, transition: { delay: 1.5 } },
+                            }}
+                            initial="hidden"
+                            animate="show"
+                          >
+                            Working on it...
+                          </m.div>
+                        )}
+                    </m.div>
+                  )}
+                </AnimatePresence>
+              </m.div>
+            </div>
+          ) : (
+            <div className="h-full w-full max-w-4xl flex flex-col gap-10 justify-center items-center">
+              {user ? (
+                <m.h3
+                  layout
+                  className="text-2xl font-light text-center"
+                  variants={{
+                    hidden: { opacity: 0, y: 10 },
+                    show: { opacity: 1, y: 0 },
+                  }}
+                  initial="hidden"
+                  animate="show"
+                >
+                  What would you like to create?
+                </m.h3>
+              ) : (
+                <m.div
+                  className="flex flex-col items-center gap-4 max-w-lg"
+                  variants={{
+                    hidden: { opacity: 0, y: 10 },
+                    show: { opacity: 1, y: 0 },
+                  }}
+                  initial="hidden"
+                  animate="show"
+                >
+                  <SignInButton />
+                  <p className="font-lighter text-center">
+                    To prevent abuse we ask you to sign in before chatting with AI.
+                  </p>
+                  <p
+                    className="underline cursor-pointer text-primary/50"
+                    onClick={() => {
+                      setIsSignInDialogOpen(true)
                     }}
-                    initial="hidden"
-                    animate="show"
-                    exit="hidden"
                   >
-                    <m.div layoutId="ai-loading-icon">
-                      <AiIconAnimation loading />
-                    </m.div>
-                    {lastMessage &&
-                      (lastMessage.role === 'user' ||
-                        (lastMessage.role === 'assistant' && !lastMessage.content)) && (
-                        <m.div
-                          layout
-                          className="text-neutral-400 italic"
-                          variants={{
-                            hidden: { opacity: 0 },
-                            show: { opacity: 1, transition: { delay: 1.5 } },
-                          }}
-                          initial="hidden"
-                          animate="show"
-                        >
-                          Working on it...
-                        </m.div>
-                      )}
-                  </m.div>
-                )}
-              </AnimatePresence>
-            </m.div>
-          </div>
-        ) : (
-          <div className="h-full w-full max-w-4xl flex flex-col gap-10 justify-center items-center">
-            {user ? (
-              <m.h3
-                layout
-                className="text-2xl font-light text-center"
+                    Why do I need to sign in?
+                  </p>
+                </m.div>
+              )}
+            </div>
+          )}
+          <AnimatePresence>
+            {!isSticky && (
+              <m.div
+                className="absolute bottom-5 left-1/2"
                 variants={{
-                  hidden: { opacity: 0, y: 10 },
-                  show: { opacity: 1, y: 0 },
+                  hidden: { scale: 0 },
+                  show: { scale: 1 },
                 }}
+                transition={{ duration: 0.1 }}
                 initial="hidden"
                 animate="show"
+                exit="hidden"
               >
-                What would you like to create?
-              </m.h3>
-            ) : (
+                <Button
+                  className="rounded-full w-8 h-8 p-1.5 text-neutral-50 bg-neutral-900"
+                  onClick={() => {
+                    scrollToEnd()
+                    inputRef.current?.focus()
+                  }}
+                >
+                  <ArrowDown />
+                </Button>
+              </m.div>
+            )}
+          </AnimatePresence>
+        </div>
+        <div className="flex flex-col items-center gap-3 pb-1 relative">
+          <AnimatePresence>
+            {!user && !isLoadingUser && isConversationStarted && (
               <m.div
-                className="flex flex-col items-center gap-4 max-w-lg"
+                className="flex flex-col items-center gap-4 max-w-lg my-4"
                 variants={{
-                  hidden: { opacity: 0, y: 10 },
+                  hidden: { opacity: 0, y: 100 },
                   show: { opacity: 1, y: 0 },
                 }}
-                initial="hidden"
                 animate="show"
+                exit="hidden"
               >
                 <SignInButton />
-                <p className="font-lighter text-center">
+                <p className="font-lighter text-center text-sm">
                   To prevent abuse we ask you to sign in before chatting with AI.
                 </p>
                 <p
-                  className="underline cursor-pointer text-primary/50"
+                  className="underline cursor-pointer text-sm text-primary/50"
                   onClick={() => {
                     setIsSignInDialogOpen(true)
                   }}
@@ -336,183 +391,130 @@ export default function Chat() {
                 </p>
               </m.div>
             )}
-          </div>
-        )}
-        <AnimatePresence>
-          {!isSticky && (
-            <m.div
-              className="absolute bottom-5 left-1/2"
-              variants={{
-                hidden: { scale: 0 },
-                show: { scale: 1 },
-              }}
-              transition={{ duration: 0.1 }}
-              initial="hidden"
-              animate="show"
-              exit="hidden"
-            >
-              <Button
-                className="rounded-full w-8 h-8 p-1.5 text-neutral-50 bg-neutral-900"
-                onClick={() => {
-                  scrollToEnd()
-                  inputRef.current?.focus()
-                }}
-              >
-                <ArrowDown />
-              </Button>
-            </m.div>
-          )}
-        </AnimatePresence>
-      </div>
-      <div className="flex flex-col items-center gap-3 pb-1 relative">
-        <AnimatePresence>
-          {!user && !isLoadingUser && isConversationStarted && (
-            <m.div
-              className="flex flex-col items-center gap-4 max-w-lg my-4"
-              variants={{
-                hidden: { opacity: 0, y: 100 },
-                show: { opacity: 1, y: 0 },
-              }}
-              animate="show"
-              exit="hidden"
-            >
-              <SignInButton />
-              <p className="font-lighter text-center text-sm">
-                To prevent abuse we ask you to sign in before chatting with AI.
-              </p>
-              <p
-                className="underline cursor-pointer text-sm text-primary/50"
-                onClick={() => {
-                  setIsSignInDialogOpen(true)
-                }}
+          </AnimatePresence>
+          <form
+            className={cn(
+              'flex py-2 px-3 rounded-[28px] bg-muted/50 border w-full max-w-4xl items-center gap-3',
+              inputFocusState && 'border-muted-foreground',
+              'transition'
+            )}
+            onSubmit={handleFormSubmit}
+          >
+            {/*
+             * This is a hidden dummy message acting as an animation anchor
+             * before the real message is added to the chat.
+             *
+             * The animation starts in this element's position and moves over to
+             * the location of the real message after submit.
+             *
+             * It works by sharing the same `layoutId` between both message elements
+             * which framer motion requires to animate between them.
+             */}
+            {input && (
+              <m.div
+                layout="position"
+                layoutId={nextMessageId}
+                className="absolute invisible -top-12 px-5 py-2.5 text-base rounded-3xl bg-neutral-100 whitespace-pre-wrap"
               >
-                Why do I need to sign in?
-              </p>
-            </m.div>
-          )}
-        </AnimatePresence>
-        <form
-          className={cn(
-            'flex py-2 px-3 rounded-[28px] bg-muted/50 border w-full max-w-4xl items-center gap-3',
-            inputFocusState && 'border-muted-foreground',
-            'transition'
-          )}
-          onSubmit={handleFormSubmit}
-        >
-          {/*
-           * This is a hidden dummy message acting as an animation anchor
-           * before the real message is added to the chat.
-           *
-           * The animation starts in this element's position and moves over to
-           * the location of the real message after submit.
-           *
-           * It works by sharing the same `layoutId` between both message elements
-           * which framer motion requires to animate between them.
-           */}
-          {input && (
-            <m.div
-              layout="position"
-              layoutId={nextMessageId}
-              className="absolute invisible -top-12 px-5 py-2.5 text-base rounded-3xl bg-neutral-100 whitespace-pre-wrap"
-            >
-              {input}
-            </m.div>
-          )}
-          <Button
-            type="button"
-            variant={'ghost'}
-            className="w-8 h-8 text-muted-foreground hover:text-foreground focus:text-foreground"
-            size="icon"
-            onClick={(e) => {
-              e.preventDefault()
-
-              if (!user) {
-                return
-              }
-
-              // Create a file input element
-              const fileInput = document.createElement('input')
-              fileInput.type = 'file'
-              fileInput.className = 'hidden'
-
-              // Add an event listener to handle the file selection
-              fileInput.addEventListener('change', async (event) => {
-                const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>
-                const [file] = Array.from(changeEvent.target?.files ?? [])
-
-                if (file) {
-                  await sendCsv(file)
+                {input}
+              </m.div>
+            )}
+            <Button
+              type="button"
+              variant={'ghost'}
+              className="w-8 h-8 text-muted-foreground hover:text-foreground focus:text-foreground"
+              size="icon"
+              onClick={(e) => {
+                e.preventDefault()
+
+                if (!user) {
+                  return
                 }
 
-                fileInput.remove()
-              })
+                // Create a file input element
+                const fileInput = document.createElement('input')
+                fileInput.type = 'file'
+                fileInput.className = 'hidden'
 
-              // Add the file input to the body (required for some browsers)
-              document.body.appendChild(fileInput)
+                // Add an event listener to handle the file selection
+                fileInput.addEventListener('change', async (event) => {
+                  const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>
+                  const [file] = Array.from(changeEvent.target?.files ?? [])
 
-              // Trigger the click event on the file input element
-              fileInput.click()
-            }}
-            disabled={isLoading || !user}
-          >
-            <Paperclip size={16} strokeWidth={1.3} />
-          </Button>
-          <textarea
-            ref={inputRef}
-            id="input"
-            name="prompt"
-            autoComplete="off"
-            className="flex-grow border-none focus-visible:ring-0 text-base placeholder:text-muted-foreground/50 bg-transparent resize-none outline-none"
-            value={input}
-            onChange={handleInputChange}
-            placeholder="Message AI or write SQL"
-            onFocus={(e) => {
-              setInputFocusState(true)
-            }}
-            onBlur={(e) => {
-              setInputFocusState(false)
-            }}
-            autoFocus
-            disabled={!user}
-            rows={Math.min(input.split('\n').length, 10)}
-            onKeyDown={(e) => {
-              if (!(e.target instanceof HTMLTextAreaElement)) {
-                return
-              }
-
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault()
-                if (!isLoading && isSubmitEnabled) {
-                  handleFormSubmit(e)
-                }
-              }
-            }}
-          />
-          {isLoading ? (
-            <Button
-              className="rounded-full w-8 h-8 p-1.5 my-1 text-neutral-50 bg-neutral-800"
-              type="submit"
-              onClick={(e) => {
-                e.preventDefault()
-                stopReply()
+                  if (file) {
+                    await sendCsv(file)
+                  }
+
+                  fileInput.remove()
+                })
+
+                // Add the file input to the body (required for some browsers)
+                document.body.appendChild(fileInput)
+
+                // Trigger the click event on the file input element
+                fileInput.click()
               }}
+              disabled={isLoading || !user}
             >
-              <Square fill="white" strokeWidth={0} className="w-3.5 h-3.5" />
+              <Paperclip size={16} strokeWidth={1.3} />
             </Button>
-          ) : (
-            <button
-              className="rounded-full w-8 h-8 p-1.5 my-1 text-neutral-50 bg-neutral-800 disabled:bg-neutral-500 flex justify-center items-center"
-              type="submit"
-              disabled={!isSubmitEnabled}
-            >
-              <ArrowUp />
-            </button>
-          )}
-        </form>
-        <div className="text-xs text-neutral-500">
-          AI can make mistakes. Check important information.
+            <textarea
+              ref={inputRef}
+              id="input"
+              name="prompt"
+              autoComplete="off"
+              className="flex-grow border-none focus-visible:ring-0 text-base placeholder:text-muted-foreground/50 bg-transparent resize-none outline-none"
+              value={input}
+              onChange={handleInputChange}
+              placeholder="Message AI or write SQL"
+              onFocus={(e) => {
+                setInputFocusState(true)
+              }}
+              onBlur={(e) => {
+                setInputFocusState(false)
+              }}
+              autoFocus
+              disabled={!user}
+              rows={Math.min(input.split('\n').length, 10)}
+              onKeyDown={(e) => {
+                if (!(e.target instanceof HTMLTextAreaElement)) {
+                  return
+                }
+
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  if (!isLoading && isSubmitEnabled) {
+                    handleFormSubmit(e)
+                  }
+                }
+              }}
+            />
+            {isLoading ? (
+              <Button
+                className="rounded-full w-8 h-8 p-1.5 my-1 text-neutral-50 bg-neutral-800"
+                type="submit"
+                onClick={(e) => {
+                  e.preventDefault()
+                  stopReply()
+                }}
+              >
+                <Square fill="white" strokeWidth={0} className="w-3.5 h-3.5" />
+              </Button>
+            ) : (
+              <button
+                className="rounded-full w-8 h-8 p-1.5 my-1 text-neutral-50 bg-neutral-800 disabled:bg-neutral-500 flex justify-center items-center"
+                type="submit"
+                disabled={!isSubmitEnabled}
+              >
+                <ArrowUp />
+              </button>
+            )}
+          </form>
+          <div className="text-xs text-neutral-500">
+            AI can make mistakes. Check important information.
+          </div>
         </div>
       </div>
-    </div>
+    </Workspace>
   )
 }
diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx
index e3ad7b0d..ee401248 100644
--- a/apps/postgres-new/components/layout.tsx
+++ b/apps/postgres-new/components/layout.tsx
@@ -9,6 +9,7 @@ import { TooltipProvider } from '~/components/ui/tooltip'
 import { useBreakpoint } from '~/lib/use-breakpoint'
 import { useApp } from './app-provider'
 import Sidebar from './sidebar'
+import Workspace from '~/components/workspace'
 
 const loadFramerFeatures = () => import('./framer-features').then((res) => res.default)
 
@@ -29,11 +30,12 @@ export default function Layout({ children }: LayoutProps) {
             </div>
           )}
           <main className="flex-1 flex flex-col lg:flex-row min-h-0">
-            {/* TODO: make sidebar available on mobile */}
-            {!isSmallBreakpoint && <Sidebar />}
-            <m.div layout="position" className="w-full h-full min-w-0 min-h-0">
-              {children}
-            </m.div>
+            <Workspace databaseId="someDatabaseId" visibility="local">
+              {!isSmallBreakpoint && <Sidebar />}
+              <m.div layout="position" className="w-full h-full min-w-0 min-h-0">
+                {children}
+              </m.div>
+            </Workspace>
           </main>
         </div>
       </TooltipProvider>
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
index 3cb87929..a69f2703 100644
--- a/apps/postgres-new/components/sidebar.tsx
+++ b/apps/postgres-new/components/sidebar.tsx
@@ -39,6 +39,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
+import Workspace from '~/components/workspace'
 
 export default function Sidebar() {
   const { user, signOut, focusRef, isSignInDialogOpen, setIsSignInDialogOpen } = useApp()
@@ -48,7 +49,7 @@ export default function Sidebar() {
   const [showSidebar, setShowSidebar] = useState(true)
 
   return (
-    <>
+    <Workspace databaseId="someDatabaseId" visibility="local">
       <Dialog
         open={isSignInDialogOpen}
         onOpenChange={(open) => {
@@ -263,7 +264,7 @@ export default function Sidebar() {
           </div>
         </div>
       )}
-    </>
+    </Workspace>
   )
 }
 
diff --git a/apps/postgres-new/components/workspace.tsx b/apps/postgres-new/components/workspace.tsx
index 5041d213..e9156dab 100644
--- a/apps/postgres-new/components/workspace.tsx
+++ b/apps/postgres-new/components/workspace.tsx
@@ -42,6 +42,11 @@ export type WorkspaceProps = {
    * Callback called when the user cancels the reply.
    */
   onCancelReply?: (append: UseChatHelpers['append']) => void | Promise<void>
+
+  /**
+   * Children elements to be rendered inside the Workspace.
+   */
+  children?: React.ReactNode
 }
 
 export default function Workspace({
@@ -50,6 +55,7 @@ export default function Workspace({
   onMessage,
   onReply,
   onCancelReply,
+  children,
 }: WorkspaceProps) {
   const isSmallBreakpoint = useBreakpoint('lg')
   const onToolCall = useOnToolCall(databaseId)
@@ -157,6 +163,7 @@ export default function Workspace({
           <p>We appreciate your patience and interest! Stay tuned for updates!</p>
         </div>
       </div>
+      {children}
     </WorkspaceContext.Provider>
   )
 }