@hef2024/llmasaservice-ui 0.18.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +15 -1
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +7 -5
  5. package/dist/index.mjs +7 -5
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1031,8 +1031,10 @@ button[data-pending=true]::after {
1031
1031
  .ai-agent-panel {
1032
1032
  display: flex;
1033
1033
  flex-direction: row;
1034
+ flex-wrap: nowrap;
1034
1035
  align-self: stretch;
1035
1036
  height: 100%;
1037
+ min-height: 400px;
1036
1038
  max-height: 100%;
1037
1039
  background-color: var(--ai-sidebar-bg);
1038
1040
  border-left: 1px solid var(--ai-sidebar-border);
@@ -1055,7 +1057,7 @@ button[data-pending=true]::after {
1055
1057
  border-right: 1px solid var(--ai-sidebar-border);
1056
1058
  }
1057
1059
  .ai-agent-panel--sidebar-left {
1058
- flex-direction: row;
1060
+ flex-direction: row !important;
1059
1061
  }
1060
1062
  .ai-agent-panel--sidebar-left .ai-agent-panel__sidebar {
1061
1063
  order: 1;
@@ -1979,6 +1981,18 @@ button[data-pending=true]::after {
1979
1981
  flex: 1;
1980
1982
  border: none;
1981
1983
  }
1984
+ .ai-agent-panel__chat-header {
1985
+ display: flex;
1986
+ align-items: center;
1987
+ justify-content: flex-end;
1988
+ padding: 8px;
1989
+ background-color: var(--ai-header-bg);
1990
+ border-bottom: 1px solid var(--ai-header-border);
1991
+ flex-shrink: 0;
1992
+ }
1993
+ .ai-agent-panel__chat-header-spacer {
1994
+ flex: 1;
1995
+ }
1982
1996
  .ai-agent-panel__context-notification {
1983
1997
  position: absolute;
1984
1998
  bottom: 70px;
package/dist/index.d.mts CHANGED
@@ -195,6 +195,7 @@ interface AIAgentPanelProps {
195
195
  data: string;
196
196
  }[];
197
197
  theme?: 'light' | 'dark';
198
+ collapsible?: boolean;
198
199
  defaultCollapsed?: boolean;
199
200
  defaultWidth?: number;
200
201
  minWidth?: number;
package/dist/index.d.ts CHANGED
@@ -195,6 +195,7 @@ interface AIAgentPanelProps {
195
195
  data: string;
196
196
  }[];
197
197
  theme?: 'light' | 'dark';
198
+ collapsible?: boolean;
198
199
  defaultCollapsed?: boolean;
199
200
  defaultWidth?: number;
200
201
  minWidth?: number;
package/dist/index.js CHANGED
@@ -4768,6 +4768,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
4768
4768
  maxContextTokens = 8e3,
4769
4769
  data = [],
4770
4770
  theme = "light",
4771
+ collapsible = true,
4771
4772
  defaultCollapsed = false,
4772
4773
  defaultWidth = 720,
4773
4774
  minWidth = 520,
@@ -4796,7 +4797,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
4796
4797
  showConversationHistory = true
4797
4798
  }, ref) => {
4798
4799
  var _a, _b, _c, _d;
4799
- const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(defaultCollapsed);
4800
+ const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(collapsible && defaultCollapsed);
4800
4801
  const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react13.useState)(() => {
4801
4802
  if (typeof window !== "undefined") {
4802
4803
  const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
@@ -5561,8 +5562,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
5561
5562
  }
5562
5563
  }, [onConversationChange]);
5563
5564
  const toggleCollapse = (0, import_react13.useCallback)(() => {
5565
+ if (!collapsible) return;
5564
5566
  setIsCollapsed((prev) => !prev);
5565
- }, []);
5567
+ }, [collapsible]);
5566
5568
  const toggleHistoryCollapse = (0, import_react13.useCallback)(() => {
5567
5569
  setIsHistoryCollapsed((prev) => {
5568
5570
  const next = !prev;
@@ -5578,7 +5580,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
5578
5580
  sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left",
5579
5581
  !showConversationHistory ? "ai-agent-panel--no-history" : ""
5580
5582
  ].filter(Boolean).join(" ");
5581
- if (isCollapsed) {
5583
+ if (collapsible && isCollapsed) {
5582
5584
  return /* @__PURE__ */ import_react13.default.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ import_react13.default.createElement(
5583
5585
  "div",
5584
5586
  {
@@ -5801,7 +5803,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
5801
5803
  onClick: handleNewConversation
5802
5804
  },
5803
5805
  /* @__PURE__ */ import_react13.default.createElement(PlusIcon, null)
5804
- ))), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react13.default.createElement(SidebarIcon, null))), /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react13.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react13.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
5806
+ ))), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react13.default.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react13.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react13.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
5805
5807
  "div",
5806
5808
  {
5807
5809
  key: activeConv.stableKey,
@@ -5843,7 +5845,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
5843
5845
  /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ import_react13.default.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
5844
5846
  );
5845
5847
  }))))))),
5846
- /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, showContextNotification && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react13.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react13.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
5848
+ /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react13.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react13.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
5847
5849
  ChatPanelWrapper,
5848
5850
  {
5849
5851
  key: `${activeConv.stableKey}-${activeConv.agentId}`,
package/dist/index.mjs CHANGED
@@ -4735,6 +4735,7 @@ var AIAgentPanel = React12.forwardRef(({
4735
4735
  maxContextTokens = 8e3,
4736
4736
  data = [],
4737
4737
  theme = "light",
4738
+ collapsible = true,
4738
4739
  defaultCollapsed = false,
4739
4740
  defaultWidth = 720,
4740
4741
  minWidth = 520,
@@ -4763,7 +4764,7 @@ var AIAgentPanel = React12.forwardRef(({
4763
4764
  showConversationHistory = true
4764
4765
  }, ref) => {
4765
4766
  var _a, _b, _c, _d;
4766
- const [isCollapsed, setIsCollapsed] = useState8(defaultCollapsed);
4767
+ const [isCollapsed, setIsCollapsed] = useState8(collapsible && defaultCollapsed);
4767
4768
  const [isHistoryCollapsed, setIsHistoryCollapsed] = useState8(() => {
4768
4769
  if (typeof window !== "undefined") {
4769
4770
  const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
@@ -5528,8 +5529,9 @@ var AIAgentPanel = React12.forwardRef(({
5528
5529
  }
5529
5530
  }, [onConversationChange]);
5530
5531
  const toggleCollapse = useCallback4(() => {
5532
+ if (!collapsible) return;
5531
5533
  setIsCollapsed((prev) => !prev);
5532
- }, []);
5534
+ }, [collapsible]);
5533
5535
  const toggleHistoryCollapse = useCallback4(() => {
5534
5536
  setIsHistoryCollapsed((prev) => {
5535
5537
  const next = !prev;
@@ -5545,7 +5547,7 @@ var AIAgentPanel = React12.forwardRef(({
5545
5547
  sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left",
5546
5548
  !showConversationHistory ? "ai-agent-panel--no-history" : ""
5547
5549
  ].filter(Boolean).join(" ");
5548
- if (isCollapsed) {
5550
+ if (collapsible && isCollapsed) {
5549
5551
  return /* @__PURE__ */ React12.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ React12.createElement(
5550
5552
  "div",
5551
5553
  {
@@ -5768,7 +5770,7 @@ var AIAgentPanel = React12.forwardRef(({
5768
5770
  onClick: handleNewConversation
5769
5771
  },
5770
5772
  /* @__PURE__ */ React12.createElement(PlusIcon, null)
5771
- ))), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React12.createElement(SidebarIcon, null))), /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React12.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
5773
+ ))), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React12.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React12.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
5772
5774
  "div",
5773
5775
  {
5774
5776
  key: activeConv.stableKey,
@@ -5810,7 +5812,7 @@ var AIAgentPanel = React12.forwardRef(({
5810
5812
  /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
5811
5813
  );
5812
5814
  }))))))),
5813
- /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat" }, showContextNotification && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React12.createElement(SparkleIcon, null), /* @__PURE__ */ React12.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
5815
+ /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React12.createElement(SparkleIcon, null), /* @__PURE__ */ React12.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
5814
5816
  ChatPanelWrapper,
5815
5817
  {
5816
5818
  key: `${activeConv.stableKey}-${activeConv.agentId}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hef2024/llmasaservice-ui",
3
- "version": "0.18.0",
3
+ "version": "0.19.0",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",