feat: update styling for MessageEditor and ChatShell components

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 {

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>
+              </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"

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"