Merge remote-tracking branch 'upstream/main' into dev

# Conflicts:
#	package.json
#	yarn.lock

app/command.ts

@@ -41,13 +41,16 @@ interface ChatCommands {
   del?: Command;
 }
 
-export const ChatCommandPrefix = ":";
+// Compatible with Chinese colon character "："
+export const ChatCommandPrefix = /^[:：]/;
 
 export function useChatCommand(commands: ChatCommands = {}) {
   function extract(userInput: string) {
-    return (
-      userInput.startsWith(ChatCommandPrefix) ? userInput.slice(1) : userInput
-    ) as keyof ChatCommands;
+    const match = userInput.match(ChatCommandPrefix);
+    if (match) {
+      return userInput.slice(1) as keyof ChatCommands;
+    }
+    return userInput as keyof ChatCommands;
   }
 
   function search(userInput: string) {
@@ -57,7 +60,7 @@ export function useChatCommand(commands: ChatCommands = {}) {
       .filter((c) => c.startsWith(input))
       .map((c) => ({
         title: desc[c as keyof ChatCommands],
-        content: ChatCommandPrefix + c,
+        content: ":" + c,
       }));
   }
 

app/components/chat.tsx

@@ -839,7 +839,7 @@ function _Chat() {
     // clear search results
     if (n === 0) {
       setPromptHints([]);
-    } else if (text.startsWith(ChatCommandPrefix)) {
+    } else if (text.match(ChatCommandPrefix)) {
       setPromptHints(chatCommands.search(text));
     } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
       // check if need to trigger auto completion

app/components/home.module.scss

@@ -143,12 +143,18 @@
   position: relative;
   padding-top: 20px;
   padding-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .sidebar-logo {
-  position: absolute;
-  right: 0;
-  bottom: 18px;
+  display: inline-flex;
+}
+
+.sidebar-title-container {
+  display: inline-flex;
+  flex-direction: column;
 }
 
 .sidebar-title {

app/components/markdown.tsx

@@ -96,6 +96,32 @@ export function PreCode(props: { children: any }) {
     [plugins],
   );
 
+  //Wrap the paragraph for plain-text
+  useEffect(() => {
+    if (ref.current) {
+      const codeElements = ref.current.querySelectorAll(
+        "code",
+      ) as NodeListOf<HTMLElement>;
+      const wrapLanguages = [
+        "",
+        "md",
+        "markdown",
+        "text",
+        "txt",
+        "plaintext",
+        "tex",
+        "latex",
+      ];
+      codeElements.forEach((codeElement) => {
+        let languageClass = codeElement.className.match(/language-(\w+)/);
+        let name = languageClass ? languageClass[1] : "";
+        if (wrapLanguages.includes(name)) {
+          codeElement.style.whiteSpace = "pre-wrap";
+        }
+      });
+    }
+  }, []);
+
   return (
     <>
       <pre ref={ref}>

app/components/sd/sd.tsx

@@ -23,7 +23,6 @@ import CopyIcon from "@/app/icons/copy.svg";
 import PromptIcon from "@/app/icons/prompt.svg";
 import ResetIcon from "@/app/icons/reload.svg";
 import { useSdStore } from "@/app/store/sd";
-import locales from "@/app/locales";
 import LoadingIcon from "@/app/icons/three-dots.svg";
 import ErrorIcon from "@/app/icons/delete.svg";
 import SDIcon from "@/app/icons/sd.svg";
@@ -64,14 +63,14 @@ function getSdTaskStatus(item: any) {
   return (
     <p className={styles["line-1"]} title={item.error} style={{ color: color }}>
       <span>
-        {locales.Sd.Status.Name}: {s}
+        {Locale.Sd.Status.Name}: {s}
       </span>
       {item.status === "error" && (
         <span
           className="clickable"
           onClick={() => {
             showModal({
-              title: locales.Sd.Detail,
+              title: Locale.Sd.Detail,
               children: (
                 <div style={{ color: color, userSelect: "text" }}>
                   {item.error}
@@ -191,13 +190,13 @@ export function Sd() {
                         className={styles["sd-img-item-info"]}
                       >
                         <p className={styles["line-1"]}>
-                          {locales.SdPanel.Prompt}:{" "}
+                          {Locale.SdPanel.Prompt}:{" "}
                           <span
                             className="clickable"
                             title={item.params.prompt}
                             onClick={() => {
                               showModal({
-                                title: locales.Sd.Detail,
+                                title: Locale.Sd.Detail,
                                 children: (
                                   <div style={{ userSelect: "text" }}>
                                     {item.params.prompt}
@@ -210,7 +209,7 @@ export function Sd() {
                           </span>
                         </p>
                         <p>
-                          {locales.SdPanel.AIModel}: {item.model_name}
+                          {Locale.SdPanel.AIModel}: {item.model_name}
                         </p>
                         {getSdTaskStatus(item)}
                         <p>{item.created_at}</p>
@@ -221,7 +220,7 @@ export function Sd() {
                               icon={<PromptIcon />}
                               onClick={() => {
                                 showModal({
-                                  title: locales.Sd.GenerateParams,
+                                  title: Locale.Sd.GenerateParams,
                                   children: (
                                     <div style={{ userSelect: "text" }}>
                                       {Object.keys(item.params).map((key) => {
@@ -327,7 +326,7 @@ export function Sd() {
                   );
                 })
               ) : (
-                <div>{locales.Sd.EmptyRecord}</div>
+                <div>{Locale.Sd.EmptyRecord}</div>
               )}
             </div>
           </div>

app/components/sidebar.tsx

@@ -196,10 +196,12 @@ export function SideBarHeader(props: {
   return (
     <Fragment>
       <div className={styles["sidebar-header"]} data-tauri-drag-region>
-        <div className={styles["sidebar-title"]} data-tauri-drag-region>
-          {title}
+        <div className={styles["sidebar-title-container"]}>
+          <div className={styles["sidebar-title"]} data-tauri-drag-region>
+            {title}
+          </div>
+          <div className={styles["sidebar-sub-title"]}>{subTitle}</div>
         </div>
-        <div className={styles["sidebar-sub-title"]}>{subTitle}</div>
         <div className={styles["sidebar-logo"] + " no-dark"}>{logo}</div>
       </div>
       {children}