@hef2024/llmasaservice-ui 0.26.0 → 0.26.1

package/dist/index.css

@@ -4059,7 +4059,7 @@ button[data-pending=true]::after {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
+  margin-left: 0;
 }
 .ai-chat-context-pill-anchor {
   position: relative;
@@ -4141,8 +4141,10 @@ button[data-pending=true]::after {
 .ai-chat-context-pill {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  justify-content: center;
+  gap: 0;
+  min-width: 30px;
+  padding: 4px 8px;
   background: var(--ai-chat-suggestion-bg, #f3f4f6);
   border: none;
   border-radius: 999px;
@@ -4172,6 +4174,17 @@ button[data-pending=true]::after {
   color: var(--ai-sidebar-text-muted, #6b7280);
   font-size: 12px;
 }
+.ai-chat-context-pill__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+}
+.ai-chat-context-pill__icon .ai-chat-icon-sm {
+  width: 14px;
+  height: 14px;
+}
 .ai-chat-context-pill__tokens {
   display: none;
 }

package/dist/index.js

@@ -5140,6 +5140,7 @@ var ChevronUpIcon = () => /* @__PURE__ */ import_react14.default.createElement("
 var AgentIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ import_react14.default.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M9 13v2" }));
 var ToolIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a2 2 0 0 0 2.8 2.8l6-6a4 4 0 0 0 5.4-5.4l-2.1 2.1-3.3-3.3 2.6-1.6Z" }));
 var CheckIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ContextViewerIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "16", x2: "8", y1: "13", y2: "13" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "16", x2: "8", y1: "17", y2: "17" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "10", x2: "8", y1: "9", y2: "9" }));
 var LLMAsAServiceLogo = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
 var AlertCircleIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
 var CloseIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
@@ -5553,9 +5554,10 @@ var ChatInput = import_react14.default.memo(({
           }
         },
         type: "button",
-        title: "View context"
+        title: "View context",
+        "aria-label": "View context"
       },
-      /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
+      /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-chat-context-pill__icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react14.default.createElement(ContextViewerIcon, null))
     ), contextViewerOpen && /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {

package/dist/index.mjs

@@ -5105,6 +5105,7 @@ var ChevronUpIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns:
 var AgentIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React14.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React14.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React14.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React14.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React14.createElement("path", { d: "M9 13v2" }));
 var ToolIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a2 2 0 0 0 2.8 2.8l6-6a4 4 0 0 0 5.4-5.4l-2.1 2.1-3.3-3.3 2.6-1.6Z" }));
 var CheckIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ContextViewerIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), /* @__PURE__ */ React14.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React14.createElement("line", { x1: "16", x2: "8", y1: "13", y2: "13" }), /* @__PURE__ */ React14.createElement("line", { x1: "16", x2: "8", y1: "17", y2: "17" }), /* @__PURE__ */ React14.createElement("line", { x1: "10", x2: "8", y1: "9", y2: "9" }));
 var LLMAsAServiceLogo = () => /* @__PURE__ */ React14.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React14.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
 var AlertCircleIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React14.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React14.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
 var CloseIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React14.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
@@ -5518,9 +5519,10 @@ var ChatInput = React14.memo(({
           }
         },
         type: "button",
-        title: "View context"
+        title: "View context",
+        "aria-label": "View context"
       },
-      /* @__PURE__ */ React14.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
+      /* @__PURE__ */ React14.createElement("span", { className: "ai-chat-context-pill__icon", "aria-hidden": "true" }, /* @__PURE__ */ React14.createElement(ContextViewerIcon, null))
     ), contextViewerOpen && /* @__PURE__ */ React14.createElement(
       "div",
       {

package/package.json

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

package/src/AIChatPanel.css

@@ -1781,7 +1781,7 @@
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
+  margin-left: 0;
 }
 
 .ai-chat-context-pill-anchor {
@@ -1872,8 +1872,10 @@
 .ai-chat-context-pill {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  justify-content: center;
+  gap: 0;
+  min-width: 30px;
+  padding: 4px 8px;
   background: var(--ai-chat-suggestion-bg, #f3f4f6);
   border: none;
   border-radius: 999px;
@@ -1909,6 +1911,19 @@
   font-size: 12px;
 }
 
+.ai-chat-context-pill__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+}
+
+.ai-chat-context-pill__icon .ai-chat-icon-sm {
+  width: 14px;
+  height: 14px;
+}
+
 .ai-chat-context-pill__tokens {
   display: none;
 }

package/src/AIChatPanel.tsx

@@ -2266,8 +2266,11 @@ const ChatInput = React.memo<ChatInputProps>(({
                   }}
                   type="button"
                   title="View context"
+                  aria-label="View context"
                 >
-                  <span className="ai-chat-context-pill__label">context: {contextSections.length} {contextSections.length === 1 ? 'section' : 'sections'}</span>
+                  <span className="ai-chat-context-pill__icon" aria-hidden="true">
+                    <ContextViewerIcon />
+                  </span>
                 </button>
 
                 {/* Context popover - positioned relative to context pill */}