feat: Lease721

README.md

@@ -126,8 +126,8 @@ export NANONETS_API_KEY="..."
 export OPENAI_API_KEY="..."
 
 # SUPABASE, used to store file content after it's read once: https://supabase.com/
-export NEXT_PUBLIC_SUPABASE_URL="..."
-export NEXT_PUBLIC_SUPABASE_ANON_KEY="..."
+export SUPABASE_URL="..."
+export SUPABASE_ANON_KEY="..."
 
 # DROPBOX, used for the Dropbox Sign API features: https://developers.hellosign.com/api/reference/signature-request/
 export DROPBOX_CLIENT_ID="..."

app/.npmrc

@@ -0,0 +1,2 @@
+@aufacicenta:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

app/next.config.js

@@ -17,14 +17,6 @@ module.exports = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  async headers() {
-    return [
-      {
-        source: "/api/:path*",
-        headers: [{ key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_ORIGIN }],
-      },
-    ];
-  },
   webpack: (config) => {
     const oneOf = config.module.rules.find((rule) => typeof rule.oneOf === "object");
 

app/package.json

@@ -17,29 +17,19 @@
     "plop": "plop"
   },
   "dependencies": {
+    "@aufacicenta/fileagent-db": "1.0.0",
     "@dropbox/sign": "^1.1.3",
     "@google-cloud/aiplatform": "^3.2.0",
-    "@near-wallet-selector/coin98-wallet": "^8.5.1",
-    "@near-wallet-selector/core": "^8.5.1",
-    "@near-wallet-selector/here-wallet": "^8.5.1",
-    "@near-wallet-selector/ledger": "^8.5.1",
-    "@near-wallet-selector/math-wallet": "^8.5.1",
-    "@near-wallet-selector/meteor-wallet": "^8.5.1",
-    "@near-wallet-selector/modal-ui": "^8.5.1",
-    "@near-wallet-selector/my-near-wallet": "^8.5.1",
-    "@near-wallet-selector/near-wallet": "^8.5.1",
-    "@near-wallet-selector/nearfi": "^8.5.1",
-    "@near-wallet-selector/nightly": "^8.5.1",
-    "@near-wallet-selector/nightly-connect": "^8.5.1",
-    "@near-wallet-selector/sender": "^8.5.1",
-    "@near-wallet-selector/wallet-connect": "^8.5.1",
     "@popperjs/core": "^2.11.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.33.1",
+    "@tanstack/react-query": "^5.29.0",
     "@types/js-cookie": "^3.0.3",
+    "@web3modal/siwe": "^4.1.5",
+    "@web3modal/wagmi": "^4.1.5",
     "ag-grid-community": "^27.3.0",
     "ag-grid-react": "^27.3.0",
     "axios": "^1.5.0",
@@ -64,22 +54,25 @@
     "near-api-js": "^2.1.4",
     "next": "12.2.0",
     "next-i18next": "^8.2.0",
-    "openai": "^4.3.1",
+    "openai": "^4.28.4",
     "react": "^18.2.0",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.7",
     "react-final-form-arrays": "^3.1.3",
     "react-final-form-listeners": "^1.0.3",
-    "react-grid-system": "^7.1.2",
+    "react-grid-system": "^8.2.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.1",
     "replicate": "^0.12.3",
     "rxjs": "^7.8.1",
+    "siwe": "^2.1.4",
     "square": "^30.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.0",
+    "viem": "^2.9.13",
+    "wagmi": "^2.5.19",
     "winston": "^3.9.0",
     "ws": "^8.13.0"
   },

app/src/app/chat/dropbox-chat/DropboxChat.module.scss

@@ -1,34 +1,44 @@
 @import "src/theme/base";
 @import "src/theme/forms/variables";
 @import "src/ui/fileagent/navbar/variables";
+@import "src/ui/dropzone/mixins";
 
-@mixin width {
+.dropbox-chat {
   @include atLargeTablet {
-    max-width: 50vw;
-    margin: 0 auto;
+    padding-top: $navbar-height;
+    padding-left: $navbar-height * 1.5;
   }
-}
-
-.dropbox-chat {
   position: relative;
   display: block;
-  min-height: 100vh;
+  height: 100vh;
+  padding-top: $navbar-height-mobile;
+  background-color: var(--color-background);
 
   &__textarea {
     @include atLargeTablet {
-      padding: $space-l;
       padding-top: 0;
+      padding-left: $navbar-height * 1.5;
     }
     position: fixed;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100%;
-    border-top: 1px solid var(--color-horizontal-line-background);
-    padding: $space-default;
+    border-top: 1px solid var(--color-secondary-shade-low);
     padding-top: 0;
     background-color: var(--color-background);
 
+    > div {
+      @extend .z-depth-1;
+
+      @include atLargeTablet {
+        padding-bottom: $space-l;
+        padding-left: $navbar-height / 2;
+      }
+      padding: $space-default;
+      background-color: var(--color-secondary);
+    }
+
     &--actions {
       @include width;
       display: flex;
@@ -42,6 +52,11 @@
 
     &--card {
       @include width;
+      background-color: var(--color-background);
+    }
+
+    &--card-content {
+      display: flex;
     }
 
     &--card-actions {
@@ -55,41 +70,57 @@
         @include atLargeTablet {
           margin-left: $space-default;
         }
-        margin-left: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        margin-left: $space-s;
+
+        button {
+          width: 100%;
+          height: 100%;
+          border-radius: $border-radius-card;
+        }
       }
     }
 
     &--card-field {
       min-height: 63px;
       padding: $space-default !important;
       font-size: $input-font-size !important;
-      background-color: var(--color-market-card-background);
+      background-color: var(--color-input-background);
       transition: height 0.2s ease-in-out;
     }
   }
 
   &__messages {
     @include atLargeTablet {
-      padding-top: $navbar-height;
+      border-top-left-radius: $border-radius-card;
+      padding-top: $navbar-height / 2;
       padding-bottom: 270px;
     }
+
+    @extend .z-depth-1;
+    position: relative;
+    height: calc(100vh - $navbar-height * 1.5);
+    border-top-left-radius: $border-radius-card;
+    border-top-right-radius: $border-radius-card;
     padding-top: $navbar-height-mobile;
     padding-bottom: 280px;
     overflow-y: scroll;
+    background-color: var(--color-secondary);
 
     &--item {
+      @include atLargeTablet {
+        padding-top: $navbar-height / 3;
+        padding-left: $navbar-height / 2;
+      }
       border-bottom: 1px solid var(--color-horizontal-line-background);
 
       > div {
         @include width;
-        display: flex;
         padding-top: $space-m;
       }
 
-      &:nth-child(odd) {
-        background-color: var(--color-background-contrast);
-      }
-
       &:last-child {
         border-bottom: none;
       }

app/src/app/chat/dropbox-chat/DropboxChat.module.scss.d.ts

@@ -7,6 +7,7 @@ export type Styles = {
   "dropbox-chat__textarea--card": string;
   "dropbox-chat__textarea--card-actions": string;
   "dropbox-chat__textarea--card-actions-button": string;
+  "dropbox-chat__textarea--card-content": string;
   "dropbox-chat__textarea--card-field": string;
   "z-depth-0": string;
   "z-depth-1": string;

app/src/app/chat/dropbox-chat/DropboxChat.tsx

@@ -4,12 +4,12 @@ import { useEffect } from "react";
 
 import { Card } from "ui/card/Card";
 import { Button } from "ui/button/Button";
-import { Dropzone } from "ui/dropzone/Dropzone";
 import { useMessageContext } from "context/message/useMessageContext";
 import { ChatContextMessage } from "context/message/MessageContext.types";
 import { MessageFileType } from "ui/dropzone/message-file-type/MessageFileType";
 import { MessageTextType } from "ui/dropzone/message-text-type/MessageTextType";
 import { useFormContext } from "context/form/useFormContext";
+import { Icon } from "ui/icon/Icon";
 
 import { DropboxChatProps, FormFieldNames } from "./DropboxChat.types";
 import styles from "./DropboxChat.module.scss";
@@ -19,7 +19,7 @@ export const DropboxChat: React.FC<DropboxChatProps> = ({ className, onSubmit })
 
   const formContext = useFormContext();
 
-  const { messages, actions, clearMessages, saveMessageThread } = useMessageContext();
+  const { messages, actions, clearMessages } = useMessageContext();
 
   useEffect(() => {
     if (!form) return;
@@ -74,38 +74,32 @@ export const DropboxChat: React.FC<DropboxChatProps> = ({ className, onSubmit })
       <div className={styles["dropbox-chat__messages"]} id="messages">
         {messages.map((message) => getMessageTypeComponent(message))}
       </div>
-
       <div className={styles["dropbox-chat__textarea"]}>
-        <div className={styles["dropbox-chat__textarea--actions"]}>
-          <Button variant="text" color="secondary" size="s" onClick={clearMessages}>
-            Clear
-          </Button>
-          <Button variant="text" color="secondary" size="s" onClick={saveMessageThread}>
-            Save this thread
-          </Button>
+        <div>
+          <div className={styles["dropbox-chat__textarea--actions"]}>
+            <Button variant="text" color="secondary" size="s" onClick={clearMessages}>
+              Clear
+            </Button>
+          </div>
+          <Card className={styles["dropbox-chat__textarea--card"]} shadow>
+            <Card.Content className={styles["dropbox-chat__textarea--card-content"]}>
+              <Field
+                name={FormFieldNames.message}
+                component="textarea"
+                className={clsx(styles["dropbox-chat__textarea--card-field"], "input-field", "materialize-textarea")}
+                id="message"
+                onKeyDown={onKeyDown}
+                placeholder="Type your message here..."
+                disabled={actions.isProcessingRequest}
+              />
+              <div className={styles["dropbox-chat__textarea--card-actions-button"]}>
+                <Button type="submit" disabled={actions.isProcessingRequest} variant="outlined">
+                  <Icon name="icon-paper-plane" />
+                </Button>
+              </div>
+            </Card.Content>
+          </Card>
         </div>
-        <Card className={styles["dropbox-chat__textarea--card"]} shadow>
-          <Card.Content>
-            <Field
-              name={FormFieldNames.message}
-              component="textarea"
-              className={clsx(styles["dropbox-chat__textarea--card-field"], "input-field", "materialize-textarea")}
-              id="message"
-              onKeyDown={onKeyDown}
-              placeholder="Type your message here..."
-              disabled={actions.isProcessingRequest}
-            />
-          </Card.Content>
-          <Card.Actions className={styles["dropbox-chat__textarea--card-actions"]}>
-            <Dropzone />
-
-            <div className={styles["dropbox-chat__textarea--card-actions-button"]}>
-              <Button type="submit" disabled={actions.isProcessingRequest}>
-                Send
-              </Button>
-            </div>
-          </Card.Actions>
-        </Card>
       </div>
     </form>
   );

app/src/app/chat/dropbox-chat/DropboxChatContainer.tsx

@@ -25,6 +25,10 @@ export const DropboxChatContainer = () => {
   }, []);
 
   const onSubmit = async (values: ChatFormValues) => {
+    if (!values.message) {
+      return;
+    }
+
     formContext.submit(values);
   };