llmasaservice-ui 0.16.13 → 0.16.14

package/dist/index.css

@@ -877,6 +877,29 @@
   line-height: 1.4;
   white-space: pre-wrap;
 }
+.thinking-content-collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.thinking-content-expanded {
+}
+.thinking-expand-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--title-text-color);
+  font-size: 0.75rem;
+  padding: 2px 4px;
+  margin-top: 2px;
+  opacity: 0.7;
+  align-self: flex-start;
+}
+.thinking-expand-btn:hover {
+  opacity: 1;
+}
 button[data-pending=true] {
   opacity: 0.55;
   pointer-events: none;

package/dist/index.js

@@ -261,6 +261,7 @@ var ChatPanel = ({
   const [alwaysApprovedTools, setAlwaysApprovedTools] = (0, import_react3.useState)([]);
   const [thinkingBlocks, setThinkingBlocks] = (0, import_react3.useState)([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = (0, import_react3.useState)(0);
+  const [thinkingExpanded, setThinkingExpanded] = (0, import_react3.useState)(false);
   const [userResizedHeight, setUserResizedHeight] = (0, import_react3.useState)(null);
   const [pendingButtonAttachments, setPendingButtonAttachments] = (0, import_react3.useState)([]);
   const actionMatchRegistry = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
@@ -438,8 +439,16 @@ var ChatPanel = ({
         className: "thinking-nav-btn"
       },
       "\u2192"
-    ))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "thinking-content" }, content)));
-  }, [thinkingBlocks, currentThinkingIndex]);
+    ))), /* @__PURE__ */ import_react3.default.createElement("div", { className: `thinking-content ${thinkingExpanded ? "thinking-content-expanded" : "thinking-content-collapsed"}` }, content), /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        className: "thinking-expand-btn",
+        onClick: () => setThinkingExpanded((prev) => !prev),
+        title: thinkingExpanded ? "Collapse" : "Expand"
+      },
+      thinkingExpanded ? "\u25B2" : "\u25BC"
+    )));
+  }, [thinkingBlocks, currentThinkingIndex, thinkingExpanded]);
   const getBrowserInfo = () => {
     try {
       return {

package/dist/index.mjs

@@ -233,6 +233,7 @@ var ChatPanel = ({
   const [alwaysApprovedTools, setAlwaysApprovedTools] = useState2([]);
   const [thinkingBlocks, setThinkingBlocks] = useState2([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState2(0);
+  const [thinkingExpanded, setThinkingExpanded] = useState2(false);
   const [userResizedHeight, setUserResizedHeight] = useState2(null);
   const [pendingButtonAttachments, setPendingButtonAttachments] = useState2([]);
   const actionMatchRegistry = useRef(/* @__PURE__ */ new Map());
@@ -410,8 +411,16 @@ var ChatPanel = ({
         className: "thinking-nav-btn"
       },
       "\u2192"
-    ))), /* @__PURE__ */ React3.createElement("div", { className: "thinking-content" }, content)));
-  }, [thinkingBlocks, currentThinkingIndex]);
+    ))), /* @__PURE__ */ React3.createElement("div", { className: `thinking-content ${thinkingExpanded ? "thinking-content-expanded" : "thinking-content-collapsed"}` }, content), /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        className: "thinking-expand-btn",
+        onClick: () => setThinkingExpanded((prev) => !prev),
+        title: thinkingExpanded ? "Collapse" : "Expand"
+      },
+      thinkingExpanded ? "\u25B2" : "\u25BC"
+    )));
+  }, [thinkingBlocks, currentThinkingIndex, thinkingExpanded]);
   const getBrowserInfo = () => {
     try {
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.16.13",
+  "version": "0.16.14",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/ChatPanel.css

@@ -1068,6 +1068,34 @@
   white-space: pre-wrap;
 }
 
+.thinking-content-collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.thinking-content-expanded {
+  /* show all content */
+}
+
+.thinking-expand-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--title-text-color);
+  font-size: 0.75rem;
+  padding: 2px 4px;
+  margin-top: 2px;
+  opacity: 0.7;
+  align-self: flex-start;
+}
+
+.thinking-expand-btn:hover {
+  opacity: 1;
+}
+
 /* Progressive action placeholder buttons */
 button[data-pending="true"] {
   opacity: 0.55;

package/src/ChatPanel.tsx

@@ -220,6 +220,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     Array<{ type: "reasoning" | "searching"; content: string; index: number }>
   >([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
+  const [thinkingExpanded, setThinkingExpanded] = useState(false);
 
   // State for tracking user-resized textarea height
   const [userResizedHeight, setUserResizedHeight] = useState<number | null>(null);
@@ -510,11 +511,20 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
               </div>
             )}
           </div>
-          <div className="thinking-content">{content}</div>
+          <div className={`thinking-content ${thinkingExpanded ? 'thinking-content-expanded' : 'thinking-content-collapsed'}`}>
+            {content}
+          </div>
+          <button
+            className="thinking-expand-btn"
+            onClick={() => setThinkingExpanded((prev) => !prev)}
+            title={thinkingExpanded ? "Collapse" : "Expand"}
+          >
+            {thinkingExpanded ? "▲" : "▼"}
+          </button>
         </div>
       </div>
     );
-  }, [thinkingBlocks, currentThinkingIndex]);
+  }, [thinkingBlocks, currentThinkingIndex, thinkingExpanded]);
 
   const getBrowserInfo = () => {
     try {