Merge pull request #2 from Afeigege/main

fix: Send button doesn't work, input box doesn't wrap on mobile

components/MsgEditor.vue

@@ -1,21 +1,21 @@
 <template>
   <v-textarea
       v-model="message"
-      clearable
-      label="Message"
-      placeholder="Type your message here"
+      label="Write a message..."
+      placeholder="Write a message..."
       rows="1"
       :auto-grow="autoGrow"
       :disabled="disabled"
       :loading="loading"
-      hide-details
+      :hint="hint"
       append-inner-icon="send"
-      @keyup.enter="send"
-      @click:append="send"
+      @keyup.enter.exact="enterOnly"
+      @click:appendInner="clickSendBtn"
   ></v-textarea>
 </template>
 
 <script>
+import { isMobile } from 'is-mobile'
 export default {
   name: "MsgEditor",
   props: {
@@ -30,6 +30,11 @@ export default {
       autoGrow: true,
     };
   },
+  computed: {
+    hint() {
+      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line.";
+    },
+  },
   watch: {
     message(val) {
       const lines = val.split(/\r\n|\r|\n/).length;
@@ -44,10 +49,24 @@ export default {
   },
   methods: {
     send() {
-      const msg = this.message
+      let msg = this.message
+      // remove the last "\n"
+      if (msg[msg.length - 1] === "\n") {
+        msg = msg.slice(0, -1)
+      }
+      if (msg.length > 0) {
+        this.sendMessage(msg)
+      }
       this.message = ""
-      this.sendMessage(msg);
     },
+    clickSendBtn () {
+      this.send()
+    },
+    enterOnly () {
+      if (!isMobile()) {
+        this.send()
+      }
+    }
   },
 }
 </script>

package.json

@@ -17,6 +17,7 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@waylaidwanderer/chatgpt-api": "^1.12.2",
     "highlight.js": "^11.7.0",
+    "is-mobile": "^3.1.1",
     "marked": "^4.2.12",
     "vuetify": "^3.0.6"
   }

pages/index.vue

@@ -112,7 +112,7 @@ createNewConversation()
         elevation="0"
         v-for="(conversation, index) in currentConversation.messages"
         :key="index"
-        :variant="conversation.from === 'ai' ? 'tonal' : ''"
+        :variant="conversation.from === 'ai' ? 'tonal' : 'text'"
     >
       <v-container>
         <v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>

yarn.lock

@@ -2887,6 +2887,11 @@ is-lambda@^1.0.1:
   resolved "https://registry.npmmirror.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
+is-mobile@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/is-mobile/-/is-mobile-3.1.1.tgz#3b9e48f40068e4ea2da411f5009779844ce8d6aa"
+  integrity sha512-RRoXXR2HNFxNkUnxtaBdGBXtFlUMFa06S0NUKf/LCF+MuGLu13gi9iBCkoEmc6+rpXuwi5Mso5V8Zf7mNynMBQ==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"