chore: add viewport meta info (#616)

Bin-Huang · May 12, 2023 · 6c4b3c6 · 6c4b3c6
1 parent 72417bf
commit 6c4b3c6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,12 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="chatbox" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="chatbox"
-    />
+    <meta name="description" content="chatbox" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, MutableRefObject } from 'react';
 import Block from './Block'
 import * as client from './client'
 import SessionItem from './SessionItem'
@@ -333,6 +333,8 @@ function Main() {
         }
     }
 
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
     return (
         <Box className='App'>
             <Grid container sx={{
@@ -410,7 +412,7 @@ function Main() {
                                                 session={session}
                                                 switchMe={() => {
                                                     store.switchCurrentSession(session)
-                                                    document.getElementById('message-input')?.focus() // better way?
+                                                    textareaRef?.current?.focus()
                                                 }}
                                                 deleteMe={() => store.deleteChatSession(session)}
                                                 copyMe={() => {
@@ -636,6 +638,7 @@ function Main() {
                                         messageScrollRef.current = { msgId: newUserMsg.id, smooth: true }
                                     }
                                 }}
+                                textareaRef={textareaRef}
                             />
                         </Box>
                     </Stack>
@@ -703,14 +706,15 @@ function MessageInput(props: {
     onSubmit: (newMsg: Message, needGenerating?: boolean) => void
     quoteCache: string
     setQuotaCache(cache: string): void
+    textareaRef: MutableRefObject<HTMLTextAreaElement | null>
 }) {
     const { t } = useTranslation()
     const [messageInput, setMessageInput] = useState('')
     useEffect(() => {
         if (props.quoteCache !== '') {
             setMessageInput(props.quoteCache)
             props.setQuotaCache('')
-            document.getElementById('message-input')?.focus()
+            props.textareaRef?.current?.focus()
         }
     }, [props.quoteCache])
     const submit = (needGenerating = true) => {
@@ -723,23 +727,25 @@ function MessageInput(props: {
     useEffect(() => {
         function keyboardShortcut(e: KeyboardEvent) {
             if (e.key === 'i' && (e.metaKey || e.ctrlKey)) {
-                document.getElementById('message-input')?.focus();
+                props.textareaRef?.current?.focus();
             }
         }
         window.addEventListener('keydown', keyboardShortcut);
         return () => {
             window.removeEventListener('keydown', keyboardShortcut)
         }
     }, [])
+
     return (
-        <form onSubmit={(e) => {
+        <form  onSubmit={(e) => {
             e.preventDefault()
             submit()
         }}>
             <Stack direction="column" spacing={1} >
                 <Grid container spacing={1}>
                     <Grid item xs>
                         <TextField
+                            inputRef={props.textareaRef}
                             multiline
                             label="Prompt"
                             value={messageInput}

diff --git a/src/styles/Block.scss b/src/styles/Block.scss
@@ -10,6 +10,7 @@
     }
     .msg-content img {
         width: 100%;
+        max-width: 40rem;
     }
 }