feat: optimize mobile adaptation

app/src/assets/pages/chat.less

@@ -38,7 +38,7 @@
   display: flex;
   gap: 6px;
   flex-direction: column;
-  max-width: calc(100vw - 64px);
+  max-width: 100%;
 
   pre {
     scrollbar-width: thin;
@@ -63,6 +63,7 @@
 
   .content-wrapper {
     display: flex;
+    flex-direction: row;
     max-width: 100%;
 
     .message-toolbar {
@@ -100,6 +101,7 @@
     width: max-content;
     height: max-content;
     white-space: nowrap;
+    margin-left: 3rem;
 
     &.subscription {
       svg, span {
@@ -142,26 +144,57 @@
   .message-avatar-wrapper {
     .message-avatar {
       display: flex;
-      width: 2.95rem;
-      height: 2.95rem;
+      width: 2.5rem;
+      height: 2.5rem;
       border-radius: var(--radius);
       text-align: center;
-      font-size: 1rem;
+      font-size: 0.785rem;
     }
 
     flex-shrink: 0;
     margin-left: 0.5rem;
     border-radius: var(--radius);
     border: 1px solid hsl(var(--border));
-    width: 2.95rem;
-    height: 2.95rem;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
   &.user {
     align-items: flex-end;
   }
 
+  @media (max-width: 768px) {
+    .content-wrapper {
+      flex-direction: column !important;
+      align-items: flex-start;
+
+      .message-avatar-wrapper {
+        margin-left: 0;
+        margin-right: 0;
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    .message-toolbar {
+      padding: 0 !important;
+    }
+
+    .message-quota {
+      margin-left: 0;
+    }
+
+    &.user {
+      .content-wrapper {
+        align-items: flex-end;
+      }
+    }
+  }
+
   &.user {
+    .content-wrapper {
+      flex-direction: row-reverse;
+    }
+
     .message-content {
       background: hsl(var(--background));
       border: 1px solid hsl(var(--border));
@@ -297,7 +330,7 @@
   width: max-content;
   user-select: none;
   word-wrap: anywhere;
-  max-width: calc(100vw - 102px);
+  max-width: 100%;
 
   svg {
     width: 20px;

app/src/assets/pages/sharing.less

@@ -202,10 +202,6 @@
     height: 100%;
     margin: 0;
     border-radius: 0;
-
-    .message {
-      max-width: calc(100vw - 2rem);
-    }
   }
 
   .header {

app/src/components/Message.tsx

@@ -33,6 +33,7 @@ import { useSelector } from "react-redux";
 import { selectUsername } from "@/store/auth.ts";
 import { appLogo } from "@/conf/env.ts";
 import Icon from "@/components/utils/Icon.tsx";
+import { useMobile } from "@/utils/device.ts";
 
 type MessageProps = {
   index: number;
@@ -45,12 +46,13 @@ type MessageProps = {
 
 function MessageSegment(props: MessageProps) {
   const ref = useRef(null);
+  const mobile = useMobile();
   const { message } = props;
 
   return (
     <div className={`message ${message.role}`} ref={ref}>
       <MessageContent {...props} />
-      <MessageQuota message={message} />
+      {!mobile && <MessageQuota message={message} />}
     </div>
   );
 }
@@ -96,6 +98,7 @@ function MessageQuota({ message }: MessageQuotaProps) {
 
 function MessageContent({ message, end, index, onEvent }: MessageProps) {
   const { t } = useTranslation();
+  const mobile = useMobile();
   const isAssistant = message.role === "assistant";
   const isUser = message.role === "user";
 
@@ -107,12 +110,7 @@ function MessageContent({ message, end, index, onEvent }: MessageProps) {
   const [editedMessage, setEditedMessage] = useState<string | undefined>("");
 
   return (
-    <div
-      className={cn(
-        "content-wrapper",
-        !isUser ? "flex-row" : "flex-row-reverse",
-      )}
-    >
+    <div className={"content-wrapper"}>
       <EditorProvider
         submittable={true}
         onSubmit={(value) => onEvent && onEvent("edit", index, value)}
@@ -145,10 +143,17 @@ function MessageContent({ message, end, index, onEvent }: MessageProps) {
           <Loader2 className={`h-5 w-5 m-1 animate-spin`} />
         )}
       </div>
-      <div className={`message-toolbar`}>
+      <div className={cn(`message-toolbar`, mobile && "w-full")}>
         <DropdownMenu open={dropdown} onOpenChange={setDropdown}>
-          <DropdownMenuTrigger className={`outline-none`}>
-            <MoreVertical className={`h-4 w-4 m-0.5`} />
+          <DropdownMenuTrigger
+            className={cn(`flex flex-row outline-none`, mobile && "my-1.5")}
+          >
+            {mobile && <MessageQuota message={message} />}
+            {!mobile ? (
+              <MoreVertical className={`h-4 w-4 m-0.5`} />
+            ) : (
+              <PencilLine className={cn(`h-6 w-6 p-1`, "ml-auto")} />
+            )}
           </DropdownMenuTrigger>
           <DropdownMenuContent align={`end`}>
             {isAssistant && end && (

app/src/components/Tips.tsx

@@ -19,6 +19,7 @@ type TipsProps = {
   trigger?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
+  classNameTrigger?: string;
   classNamePopup?: string;
   hideTimeout?: number;
   notHide?: boolean;
@@ -33,6 +34,7 @@ function Tips({
   trigger,
   children,
   className,
+  classNameTrigger,
   classNamePopup,
   hideTimeout,
   notHide,
@@ -73,7 +75,12 @@ function Tips({
 
   return (
     <DropdownMenu open={drop} onOpenChange={setDrop}>
-      <DropdownMenuTrigger className={`tips-trigger select-none outline-none`}>
+      <DropdownMenuTrigger
+        className={cn(
+          `tips-trigger select-none outline-none`,
+          classNameTrigger,
+        )}
+      >
         <TooltipProvider>
           <Tooltip open={tooltip} onOpenChange={setTooltip}>
             <TooltipTrigger asChild>

channel/worker.go

@@ -36,7 +36,11 @@ func NewChatRequest(group string, props *adapter.ChatProps, hook globals.Hook) e
 	return err
 }
 
-func PreflightCache(cache *redis.Client, hash string, buffer *utils.Buffer, hook globals.Hook) (int64, bool, error) {
+func PreflightCache(cache *redis.Client, model string, hash string, buffer *utils.Buffer, hook globals.Hook) (int64, bool, error) {
+	if !utils.Contains(model, globals.CacheAcceptedModels) {
+		return 0, false, nil
+	}
+
 	idx := utils.Intn64(globals.CacheAcceptedSize)
 	key := fmt.Sprintf("chat-cache:%d:%s", idx, hash)
 
@@ -76,7 +80,7 @@ func StoreCache(cache *redis.Client, hash string, index int64, buffer *utils.Buf
 
 func NewChatRequestWithCache(cache *redis.Client, buffer *utils.Buffer, group string, props *adapter.ChatProps, hook globals.Hook) (bool, error) {
 	hash := utils.Md5Encrypt(utils.Marshal(props))
-	idx, hit, err := PreflightCache(cache, hash, buffer, hook)
+	idx, hit, err := PreflightCache(cache, props.Model, hash, buffer, hook)
 	if hit {
 		return true, err
 	}