From 3bdcc0b1471bf04cbd6b01da092543338b0dc47c Mon Sep 17 00:00:00 2001
From: Haitao Pan <manbuzhe2009@qq.com>
Date: Thu, 12 Mar 2026 19:13:50 +0800
Subject: [PATCH] Simplify XWorkmate sidebar assistant layout

---
 .../openclaw/OpenClawAssistantPane.tsx        | 138 ++++++++++--------
 1 file changed, 78 insertions(+), 60 deletions(-)

diff --git a/src/components/openclaw/OpenClawAssistantPane.tsx b/src/components/openclaw/OpenClawAssistantPane.tsx
index 01bc6d5..82dea50 100644
--- a/src/components/openclaw/OpenClawAssistantPane.tsx
+++ b/src/components/openclaw/OpenClawAssistantPane.tsx
@@ -264,6 +264,7 @@ export function OpenClawAssistantPane({
 
   const compact = variant === "sidebar";
   const locale = isChinese ? "zh-CN" : "en-US";
+  const compactConnected = compact && connectionState === "ready";
 
   const quickActions = useMemo(
     () =>
@@ -347,6 +348,11 @@ export function OpenClawAssistantPane({
         "侧栏模式与主页布局保持不变，消息会通过 OpenClaw gateway 进入 XWorkmate。你可以上传文件、贴图，或直接截当前页给助手分析。",
         "The page and sidebar layout stay aligned. Messages flow through the OpenClaw gateway into XWorkmate. Upload files, paste images, or capture the current page for analysis.",
       ),
+      compactHint: pickCopy(
+        isChinese,
+        "直接开始对话，必要时再补充附件或截图。",
+        "Start the conversation and add files or a screenshot only when needed.",
+      ),
       placeholder: pickCopy(
         isChinese,
         "向 XWorkmate 助手描述任务，或先截个图再发。",
@@ -765,14 +771,18 @@ export function OpenClawAssistantPane({
             )}
           />
           {healthBadge}
-          <span className="text-[var(--color-text-subtle)]/60">·</span>
-          {gatewayTokenSource === "env"
-            ? copy.envToken
-            : gatewayTokenSource === "vault"
-              ? copy.vaultToken
-            : gatewayTokenSource === "request"
-              ? copy.sessionToken
-              : copy.noToken}
+          {!compactConnected ? (
+            <>
+              <span className="text-[var(--color-text-subtle)]/60">·</span>
+              {gatewayTokenSource === "env"
+                ? copy.envToken
+                : gatewayTokenSource === "vault"
+                  ? copy.vaultToken
+                  : gatewayTokenSource === "request"
+                    ? copy.sessionToken
+                    : copy.noToken}
+            </>
+          ) : null}
         </div>
 
         <div className="min-w-[164px] flex-1">
@@ -801,51 +811,55 @@ export function OpenClawAssistantPane({
             void connectGateway();
           }}
           className="inline-flex items-center gap-2 rounded-full border border-[color:var(--color-surface-border)] px-3 py-1.5 text-[11px] font-semibold text-[var(--color-text)] transition hover:border-[color:var(--color-primary-border)] hover:bg-[var(--color-surface-muted)]"
+          title={copy.reconnect}
         >
           {connectionState === "connecting" ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
           ) : (
             <RefreshCw className="h-3.5 w-3.5" />
           )}
-          {copy.reconnect}
+          {!compactConnected ? copy.reconnect : null}
         </button>
 
         <button
           type="button"
           onClick={() => router.push("/panel/api")}
           className="inline-flex items-center gap-2 rounded-full border border-[color:var(--color-primary-border)] bg-[var(--color-primary-muted)] px-3 py-1.5 text-[11px] font-semibold text-[var(--color-primary)] transition hover:opacity-90"
+          title={copy.integrations}
         >
           <Settings2 className="h-3.5 w-3.5" />
-          {copy.integrations}
+          {!compactConnected ? copy.integrations : null}
         </button>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col">
-        <div className="border-b border-[color:var(--color-surface-border)] px-3 py-2.5">
-          <div className="flex flex-wrap gap-2">
-            {sessions.slice(0, compact ? 4 : 8).map((session) => (
-              <button
-                key={session.key}
-                type="button"
-                onClick={() => {
-                  setSelectedSessionKey(session.key);
-                  void connectGateway(session.key);
-                }}
-                className={cn(
-                  "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] transition",
-                  session.key === selectedSessionKey
-                    ? "border-[color:var(--color-primary)] bg-[var(--color-primary-muted)] text-[var(--color-primary)]"
-                    : "border-[color:var(--color-surface-border)] bg-[var(--color-surface)] text-[var(--color-text-subtle)] hover:border-[color:var(--color-primary-border)]",
-                )}
-              >
-                <Bot className="h-3.5 w-3.5" />
-                <span>
-                  {session.derivedTitle || session.displayName || session.key}
-                </span>
-              </button>
-            ))}
+        {!compact ? (
+          <div className="border-b border-[color:var(--color-surface-border)] px-3 py-2.5">
+            <div className="flex flex-wrap gap-2">
+              {sessions.slice(0, 8).map((session) => (
+                <button
+                  key={session.key}
+                  type="button"
+                  onClick={() => {
+                    setSelectedSessionKey(session.key);
+                    void connectGateway(session.key);
+                  }}
+                  className={cn(
+                    "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] transition",
+                    session.key === selectedSessionKey
+                      ? "border-[color:var(--color-primary)] bg-[var(--color-primary-muted)] text-[var(--color-primary)]"
+                      : "border-[color:var(--color-surface-border)] bg-[var(--color-surface)] text-[var(--color-text-subtle)] hover:border-[color:var(--color-primary-border)]",
+                  )}
+                >
+                  <Bot className="h-3.5 w-3.5" />
+                  <span>
+                    {session.derivedTitle || session.displayName || session.key}
+                  </span>
+                </button>
+              ))}
+            </div>
           </div>
-        </div>
+        ) : null}
 
         <div className="flex-1 overflow-y-auto px-3 py-3">
           {!openclawUrl.trim() ? (
@@ -878,24 +892,26 @@ export function OpenClawAssistantPane({
                   {copy.assistantTitle}
                 </h3>
                 <p className="text-sm text-[var(--color-text-subtle)]">
-                  {copy.assistantHint}
+                  {compact ? copy.compactHint : copy.assistantHint}
                 </p>
               </div>
-              <div className="flex flex-wrap justify-center gap-2">
-                {quickActions.map((action) => (
-                  <button
-                    key={action}
-                    type="button"
-                    onClick={() => {
-                      setComposerValue(action);
-                      textareaRef.current?.focus();
-                    }}
-                    className="rounded-full border border-[color:var(--color-surface-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-subtle)] transition hover:border-[color:var(--color-primary-border)] hover:text-[var(--color-primary)]"
-                  >
-                    {action}
-                  </button>
-                ))}
-              </div>
+              {!compact ? (
+                <div className="flex flex-wrap justify-center gap-2">
+                  {quickActions.map((action) => (
+                    <button
+                      key={action}
+                      type="button"
+                      onClick={() => {
+                        setComposerValue(action);
+                        textareaRef.current?.focus();
+                      }}
+                      className="rounded-full border border-[color:var(--color-surface-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-subtle)] transition hover:border-[color:var(--color-primary-border)] hover:text-[var(--color-primary)]"
+                    >
+                      {action}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
             </div>
           ) : (
             <div className="space-y-3">
@@ -924,7 +940,7 @@ export function OpenClawAssistantPane({
                         )}
                         dangerouslySetInnerHTML={{ __html: message.html }}
                       />
-                      {message.timestampMs ? (
+                      {message.timestampMs && !compact ? (
                         <p
                           className={cn(
                             "mt-2 text-[11px]",
@@ -1072,15 +1088,17 @@ export function OpenClawAssistantPane({
                 {copy.capturePage}
               </button>
 
-              <div className="ml-auto flex items-center gap-2 text-[11px] text-[var(--color-text-subtle)]">
-                <Link2 className="h-3.5 w-3.5" />
-                <span>
-                  {activeSession?.derivedTitle ||
-                    activeSession?.displayName ||
-                    selectedSessionKey ||
-                    copy.mainSession}
-                </span>
-              </div>
+              {!compact ? (
+                <div className="ml-auto flex items-center gap-2 text-[11px] text-[var(--color-text-subtle)]">
+                  <Link2 className="h-3.5 w-3.5" />
+                  <span>
+                    {activeSession?.derivedTitle ||
+                      activeSession?.displayName ||
+                      selectedSessionKey ||
+                      copy.mainSession}
+                  </span>
+                </div>
+              ) : null}
 
               <button
                 type="button"