messages list

1 files changed, 68 insertions, 29 deletions

diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index bbd3bb0c..958706c8 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -21,6 +21,8 @@ function supportsDVH() {
 }
 
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
+  // return <Chat sidebarOpen={sidebarOpen} />;
+
   const [hide, setHide] = useState(false);
   const [value, setValue] = useState('');
   const { width } = useViewport();
@@ -218,7 +220,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   };
 
   return (
-    <motion.main
+    <main
       data-sidebar-open={sidebarOpen}
       ref={main}
       className={cn(
@@ -226,7 +228,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
         hide ? '' : 'main-hidden',
       )}
     >
-      <div className="flex flex-col w-full">
+      <div className="flex w-full flex-col">
         {chatHistory.map((chat, index) => (
           <ChatMessage
             key={index}
@@ -238,34 +240,71 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
       <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
         Ask your Second brain
       </h1>
-      <form
-        className="mt-auto h-max min-h-[3em] w-full resize-y flex-row items-start justify-center overflow-none py-5 md:mt-0 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
-        onSubmit={async (e) => await getSearchResults(e)}
+
+      <Textarea2
+        ref={textArea}
+        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:mt-0 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
+        textAreaProps={{
+          placeholder: 'Ask your SuperMemory...',
+          className:
+            'h-auto overflow-auto md:h-full md:resize-none text-lg py-0 px-2 md:py-0 md:p-5 resize-y text-rgray-11 w-full min-h-[1em]',
+          value,
+          autoFocus: true,
+          onChange: (e) => setValue(e.target.value),
+        }}
       >
-        <Textarea2
-          ref={textArea}
-          textAreaProps={{
-            placeholder: 'Ask your SuperMemory...',
-            className:
-              'h-auto overflow-auto md:h-full md:resize-none text-lg py-0 px-2 pt-2 md:py-0 md:p-5 resize-y text-rgray-11 w-full min-h-[1em]',
-            value,
-            autoFocus: true,
-            onChange: (e) => setValue(e.target.value),
-          }}
-        >
-          <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
-            <FilterCombobox className="hidden md:flex" />
-            <button
-              type="submit"
-              disabled={value.trim().length < 1}
-              className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:ml-auto md:mt-0"
-            >
-              <ArrowRight className="h-5 w-5" />
-            </button>
-          </div>
-        </Textarea2>
-      </form>
+        <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
+          <FilterCombobox className="hidden md:flex" />
+          <button
+            type="submit"
+            disabled={value.trim().length < 1}
+            className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:ml-auto md:mt-0"
+          >
+            <ArrowRight className="h-5 w-5" />
+          </button>
+        </div>
+      </Textarea2>
+      {/* {searchResults && (
+        <SearchResults aiResponse={aiResponse} sources={searchResults} />
+      )} */}
       {width <= 768 && <MemoryDrawer hide={hide} />}
-    </motion.main>
+    </main>
+  );
+}
+
+export function Chat({ sidebarOpen }: { sidebarOpen: boolean }) {
+  const [value, setValue] = useState('');
+
+  return (
+    <main
+      data-sidebar-open={sidebarOpen}
+      className={cn(
+        "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
+      )}
+    >
+      <Textarea2
+        // ref={textArea}
+        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:mt-0 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
+        textAreaProps={{
+          placeholder: 'Ask your SuperMemory...',
+          className:
+            'h-auto overflow-auto md:h-full md:resize-none text-lg py-0 px-2 md:py-0 md:p-5 resize-y text-rgray-11 w-full min-h-[1em]',
+          value,
+          autoFocus: true,
+          onChange: (e) => setValue(e.target.value),
+        }}
+      >
+        <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
+          <FilterCombobox className="hidden md:flex" />
+          <button
+            type="submit"
+            disabled={value.trim().length < 1}
+            className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:ml-auto md:mt-0"
+          >
+            <ArrowRight className="h-5 w-5" />
+          </button>
+        </div>
+      </Textarea2>
+    </main>
   );
 }