From c159bbd37318f0798b8b52b53cad3bfd9e9a53ae Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Tue, 14 Apr 2026 18:51:20 +0800
Subject: [PATCH] feat: update styling for MessageEditor and ChatShell
 components

---
 widget/app/globals.css                  |  2 +-
 widget/components/im/chat-shell.tsx     | 29 +++++++++++++------------
 widget/components/im/message-editor.tsx |  2 +-
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/widget/app/globals.css b/widget/app/globals.css
index c2bc301..e648c5d 100644
--- a/widget/app/globals.css
+++ b/widget/app/globals.css
@@ -91,7 +91,7 @@ textarea.cs-agent-scrollbar::-webkit-scrollbar-thumb:hover {
 }
 
 .cs-agent-shell {
-  padding: 10px;
+  /* padding: 10px; */
 }
 
 .cs-agent-panel {
diff --git a/widget/components/im/chat-shell.tsx b/widget/components/im/chat-shell.tsx
index f76cf48..f453663 100644
--- a/widget/components/im/chat-shell.tsx
+++ b/widget/components/im/chat-shell.tsx
@@ -1,30 +1,29 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Maximize2Icon,
   Minimize2Icon,
   MinusIcon,
   RotateCwIcon,
-  ShieldCheckIcon,
-  XIcon,
+  XIcon
 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
-import { useChatStore } from "@/lib/store/chat-store";
-import { closeConversation } from "@/lib/services/conversation";
-import {
-  bindHostBridge,
-  requestHostClose,
-  requestHostMinimize,
-  requestHostToggleMaximize,
-} from "@/lib/widget/host-bridge";
 import { ConnectionStatus } from "@/components/im/connection-status";
 import { MessageEditor } from "@/components/im/message-editor";
 import {
   MessageList,
   type MessageListHandle,
 } from "@/components/im/message-list";
+import { closeConversation } from "@/lib/services/conversation";
+import { useChatStore } from "@/lib/store/chat-store";
+import {
+  bindHostBridge,
+  requestHostClose,
+  requestHostMinimize,
+  requestHostToggleMaximize,
+} from "@/lib/widget/host-bridge";
 
 export function ChatShell() {
   const messageListRef = useRef<MessageListHandle | null>(null);
@@ -204,11 +203,13 @@ export function ChatShell() {
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <div className="inline-flex items-center gap-1.5 rounded-full border border-white/70 bg-white/65 px-2.5 py-1 text-[11px] text-slate-500 shadow-[0_6px_18px_rgba(15,23,42,0.04)]">
+              {/* <div className="inline-flex items-center gap-1.5 rounded-full border border-white/70 bg-white/65 px-2.5 py-1 text-[11px] text-slate-500 shadow-[0_6px_18px_rgba(15,23,42,0.04)]">
                 <ShieldCheckIcon className="size-3.5 text-emerald-600" />
                 会话加密传输
-              </div>
-              <ConnectionStatus status={status} />
+              </div> */}
+              {status !== "connected" ? (
+                <ConnectionStatus status={status} />
+              ) : null}
               <div className="inline-flex items-center gap-1 rounded-[18px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(241,245,249,0.82))] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_28px_rgba(15,23,42,0.07)] backdrop-blur-xl">
                 <button
                   type="button"
diff --git a/widget/components/im/message-editor.tsx b/widget/components/im/message-editor.tsx
index 0b9f7b1..95e64cc 100644
--- a/widget/components/im/message-editor.tsx
+++ b/widget/components/im/message-editor.tsx
@@ -207,7 +207,7 @@ export function MessageEditor({
 
   return (
     <div className="px-3 pb-3 pt-2">
-      <div className="rounded-3xl border border-white/60 bg-white/78 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)] backdrop-blur">
+      <div className="rounded-xl border border-white/60 bg-white/78 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)] backdrop-blur">
         <input
           ref={imageInputRef}
           type="file"