Merge branch 'Yidadaa:main' into main

app/api/access.ts

@@ -14,3 +14,4 @@ export function getAccessCodes(): Set<string> {
 }
 
 export const ACCESS_CODES = getAccessCodes();
+export const IS_IN_DOCKER = process.env.DOCKER;

app/components/home.tsx

@@ -131,10 +131,12 @@ function useSubmitHandler() {
       (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
       (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
       (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
       (config.submitKey === SubmitKey.Enter &&
         !e.altKey &&
         !e.ctrlKey &&
-        !e.shiftKey)
+        !e.shiftKey &&
+        !e.metaKey)
     );
   };
 
@@ -163,6 +165,7 @@ export function Chat(props: { showSideBar?: () => void }) {
     setIsLoading(true);
     onUserInput(userInput).then(() => setIsLoading(false));
     setUserInput("");
+    inputRef.current?.focus();
   };
 
   // stop response
@@ -203,6 +206,7 @@ export function Chat(props: { showSideBar?: () => void }) {
 
   // for auto-scroll
   const latestMessageRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   // wont scroll while hovering messages
   const [autoScroll, setAutoScroll] = useState(false);
@@ -371,6 +375,7 @@ export function Chat(props: { showSideBar?: () => void }) {
       <div className={styles["chat-input-panel"]}>
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
+            ref={inputRef}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
             rows={3}
@@ -561,7 +566,10 @@ export function Home() {
             <IconButton
               icon={<AddIcon />}
               text={Locale.Home.NewChat}
-              onClick={createNewSession}
+              onClick={()=>{
+                createNewSession();
+                setShowSideBar(false);
+              }}
             />
           </div>
         </div>

app/layout.tsx

@@ -3,7 +3,7 @@ import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/prism.scss";
 import process from "child_process";
-import { ACCESS_CODES } from "./api/access";
+import { ACCESS_CODES, IS_IN_DOCKER } from "./api/access";
 
 let COMMIT_ID: string | undefined;
 try {
@@ -28,7 +28,7 @@ export const metadata = {
 function Meta() {
   const metas = {
     version: COMMIT_ID ?? "unknown",
-    access: ACCESS_CODES.size > 0 ? "enabled" : "disabled",
+    access: (ACCESS_CODES.size > 0 || IS_IN_DOCKER) ? "enabled" : "disabled",
   };
 
   return (

app/store/app.ts

@@ -21,6 +21,7 @@ export enum SubmitKey {
   CtrlEnter = "Ctrl + Enter",
   ShiftEnter = "Shift + Enter",
   AltEnter = "Alt + Enter",
+  MetaEnter = "Meta + Enter",
 }
 
 export enum Theme {

app/styles/markdown.scss

@@ -839,21 +839,20 @@
 
 .markdown-body .highlight pre,
 .markdown-body pre {
-  padding: 16px;
+  padding: 16px 16px 8px 16px;
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: var(--color-canvas-subtle);
   border-radius: 6px;
 }
 
 .markdown-body pre code,
 .markdown-body pre tt {
-  display: inline;
-  max-width: auto;
+  display: inline-block;
+  max-width: 100%;
   padding: 0;
   margin: 0;
-  overflow: visible;
+  overflow-x: scroll;
   line-height: inherit;
   word-wrap: normal;
   background-color: transparent;

app/styles/prism.scss

@@ -121,32 +121,32 @@
   }
 }
 
-// @mixin light {
-//   .markdown-body pre[class*="language-"] {
-//     filter: invert(1) hue-rotate(50deg) brightness(1.3);
-//   }
-// }
+@mixin light {
+  .markdown-body pre {
+    filter: invert(1) hue-rotate(90deg) brightness(1.3);
+  }
+}
 
-// @mixin dark {
-//   .markdown-body pre[class*="language-"] {
-//     filter: none;
-//   }
-// }
+@mixin dark {
+  .markdown-body pre {
+    filter: none;
+  }
+}
 
-// :root {
-// @include light();
-// }
+:root {
+  @include light();
+}
 
-// .light {
-//   @include light();
-// }
+.light {
+  @include light();
+}
 
-// .dark {
-//   @include dark();
-// }
+.dark {
+  @include dark();
+}
 
-// @media (prefers-color-scheme: dark) {
-//   :root {
-//     @include dark();
-//   }
-// }
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark();
+  }
+}