@flanksource/clicky-ui 0.2.18 → 0.2.20

package/dist/ai.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ChatFab = require("./data/ai/ChatFab.cjs");
+const ChatWindow = require("./data/ai/ChatWindow.cjs");
+const ChatWindowManager = require("./data/ai/ChatWindowManager.cjs");
+const ContextBadges = require("./data/ai/ContextBadges.cjs");
+const ContextUsage = require("./data/chat/ContextUsage.cjs");
+const ThreadPicker = require("./data/ai/ThreadPicker.cjs");
+const ToolPreferences = require("./data/ai/ToolPreferences.cjs");
+const context = require("./data/ai/context.cjs");
+const chatWindowContext = require("./data/ai/chat-window-context.cjs");
+exports.ChatFab = ChatFab.ChatFab;
+exports.ChatWindow = ChatWindow.ChatWindow;
+exports.ChatWindowLayer = ChatWindow.ChatWindowLayer;
+exports.ChatWindowManagerProvider = ChatWindowManager.ChatWindowManagerProvider;
+exports.ContextBadges = ContextBadges.ContextBadges;
+exports.ContextBadgesReadonly = ContextBadges.ContextBadgesReadonly;
+exports.ContextUsage = ContextUsage.ContextUsage;
+exports.ThreadPicker = ThreadPicker.ThreadPicker;
+exports.ToolPreferences = ToolPreferences.ToolPreferences;
+exports.makeContextId = context.makeContextId;
+exports.parseContextPrefix = context.parseContextPrefix;
+exports.serializeContext = context.serializeContext;
+exports.nextPromptId = chatWindowContext.nextPromptId;
+exports.useChatWindowManager = chatWindowContext.useChatWindowManager;
+//# sourceMappingURL=ai.cjs.map

package/dist/ai.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ai.d.ts

@@ -0,0 +1,2 @@
+export * from './data/ai';
+//# sourceMappingURL=ai.d.ts.map

package/dist/ai.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai.d.ts","sourceRoot":"","sources":["../src/ai.ts"],"names":[],"mappings":"AAKA,cAAc,WAAW,CAAC"}

package/dist/ai.js

@@ -0,0 +1,26 @@
+import { ChatFab } from "./data/ai/ChatFab.js";
+import { ChatWindow, ChatWindowLayer } from "./data/ai/ChatWindow.js";
+import { ChatWindowManagerProvider } from "./data/ai/ChatWindowManager.js";
+import { ContextBadges, ContextBadgesReadonly } from "./data/ai/ContextBadges.js";
+import { ContextUsage } from "./data/chat/ContextUsage.js";
+import { ThreadPicker } from "./data/ai/ThreadPicker.js";
+import { ToolPreferences } from "./data/ai/ToolPreferences.js";
+import { makeContextId, parseContextPrefix, serializeContext } from "./data/ai/context.js";
+import { nextPromptId, useChatWindowManager } from "./data/ai/chat-window-context.js";
+export {
+  ChatFab,
+  ChatWindow,
+  ChatWindowLayer,
+  ChatWindowManagerProvider,
+  ContextBadges,
+  ContextBadgesReadonly,
+  ContextUsage,
+  ThreadPicker,
+  ToolPreferences,
+  makeContextId,
+  nextPromptId,
+  parseContextPrefix,
+  serializeContext,
+  useChatWindowManager
+};
+//# sourceMappingURL=ai.js.map

package/dist/ai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/chat.cjs

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Attachment = require("./data/chat/Attachment.cjs");
 const Chat = require("./data/chat/Chat.cjs");
+const ContextUsage = require("./data/chat/ContextUsage.cjs");
 const Conversation = require("./data/chat/Conversation.cjs");
 const ModelSelector = require("./data/chat/ModelSelector.cjs");
+const Chat_fixtures = require("./data/chat/Chat.fixtures.cjs");
 const Message = require("./data/chat/Message.cjs");
 const MessageActions = require("./data/chat/MessageActions.cjs");
 const PromptInput = require("./data/chat/PromptInput.cjs");
@@ -12,12 +14,16 @@ const Suggestion = require("./data/chat/Suggestion.cjs");
 const ToolCall = require("./data/chat/ToolCall.cjs");
 const clickyOperationsToTools = require("./data/chat/clickyOperationsToTools.cjs");
 const types = require("./data/chat/types.cjs");
+const providerIcons = require("./data/chat/provider-icons.cjs");
 exports.AttachmentButton = Attachment.AttachmentButton;
 exports.AttachmentList = Attachment.AttachmentList;
 exports.Chat = Chat.Chat;
+exports.ContextUsage = ContextUsage.ContextUsage;
 exports.Conversation = Conversation.Conversation;
 exports.EffortSelector = ModelSelector.EffortSelector;
 exports.ModelSelector = ModelSelector.ModelSelector;
+exports.MOCK_MODELS = Chat_fixtures.MOCK_MODELS;
+exports.mockChatTransport = Chat_fixtures.mockChatTransport;
 exports.Message = Message.Message;
 exports.MessageActions = MessageActions.MessageActions;
 exports.PromptInput = PromptInput.PromptInput;
@@ -33,4 +39,5 @@ exports.isTypedToolPart = types.isTypedToolPart;
 exports.suggestionLabel = types.suggestionLabel;
 exports.suggestionPrompt = types.suggestionPrompt;
 exports.toolPartName = types.toolPartName;
+exports.providerIcon = providerIcons.providerIcon;
 //# sourceMappingURL=chat.cjs.map

package/dist/chat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"chat.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chat.js

@@ -1,7 +1,9 @@
 import { AttachmentButton, AttachmentList } from "./data/chat/Attachment.js";
 import { Chat } from "./data/chat/Chat.js";
+import { ContextUsage } from "./data/chat/ContextUsage.js";
 import { Conversation } from "./data/chat/Conversation.js";
 import { EffortSelector, ModelSelector } from "./data/chat/ModelSelector.js";
+import { MOCK_MODELS, mockChatTransport } from "./data/chat/Chat.fixtures.js";
 import { Message } from "./data/chat/Message.js";
 import { MessageActions } from "./data/chat/MessageActions.js";
 import { PromptInput } from "./data/chat/PromptInput.js";
@@ -10,12 +12,15 @@ import { Suggestions } from "./data/chat/Suggestion.js";
 import { ToolCall } from "./data/chat/ToolCall.js";
 import { clickyOperationsToTools, operationToTool } from "./data/chat/clickyOperationsToTools.js";
 import { isDynamicToolPart, isFilePart, isReasoningPart, isTypedToolPart, suggestionLabel, suggestionPrompt, toolPartName } from "./data/chat/types.js";
+import { providerIcon } from "./data/chat/provider-icons.js";
 export {
   AttachmentButton,
   AttachmentList,
   Chat,
+  ContextUsage,
   Conversation,
   EffortSelector,
+  MOCK_MODELS,
   Message,
   MessageActions,
   ModelSelector,
@@ -28,7 +33,9 @@ export {
   isFilePart,
   isReasoningPart,
   isTypedToolPart,
+  mockChatTransport,
   operationToTool,
+  providerIcon,
   suggestionLabel,
   suggestionPrompt,
   toolPartName

package/dist/chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"chat.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/FilterBar.cjs

@@ -25,10 +25,6 @@ const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
 const FilterBarContext = react.createContext({
   autoSubmit: true
 });
-function applyFilterExtensions(filter, extensions) {
-  if (!extensions || extensions.length === 0) return filter;
-  return extensions.reduce((current, ext) => ext(current), filter);
-}
 function FilterBar({
   search,
   filters,
@@ -49,6 +45,7 @@ function FilterBar({
   const contextValue = react.useMemo(() => ({ autoSubmit }), [autoSubmit]);
   const allFilters = filters ?? [];
   const responsiveOverflow = overflowMode === "responsive" && allFilters.length > 0;
+  const mobileFilterOverflow = useMediaQuery("(max-width: 767px)");
   const filterListRef = react.useRef(null);
   const overflowTriggerRef = react.useRef(null);
   const filterNodeRefs = react.useRef(/* @__PURE__ */ new Map());
@@ -60,11 +57,15 @@ function FilterBar({
   const [visibleFilterCount, setVisibleFilterCount] = react.useState(allFilters.length);
   const allFiltersRef = react.useRef(allFilters);
   const responsiveOverflowRef = react.useRef(responsiveOverflow);
+  const mobileFilterOverflowRef = react.useRef(mobileFilterOverflow);
   allFiltersRef.current = allFilters;
   responsiveOverflowRef.current = responsiveOverflow;
+  mobileFilterOverflowRef.current = mobileFilterOverflow;
   react.useLayoutEffect(() => {
-    setVisibleFilterCount(allFiltersRef.current.length);
-  }, [filterKeys]);
+    setVisibleFilterCount(
+      responsiveOverflowRef.current && mobileFilterOverflowRef.current ? 0 : allFiltersRef.current.length
+    );
+  }, [filterKeys, mobileFilterOverflow]);
   const measureOverflow = react.useCallback(() => {
     var _a;
     const current = allFiltersRef.current;
@@ -72,6 +73,10 @@ function FilterBar({
       setVisibleFilterCount(current.length);
       return;
     }
+    if (mobileFilterOverflowRef.current) {
+      setVisibleFilterCount(0);
+      return;
+    }
     const filterList = filterListRef.current;
     if (!filterList) return;
     const availableWidth = Math.floor(filterList.getBoundingClientRect().width);
@@ -119,7 +124,7 @@ function FilterBar({
       observer.disconnect();
       window.removeEventListener("resize", measureOverflow);
     };
-  }, [measureOverflow, responsiveOverflow]);
+  }, [measureOverflow, responsiveOverflow, mobileFilterOverflow]);
   const inlineFilters = responsiveOverflow ? allFilters.slice(0, Math.min(visibleFilterCount, allFilters.length)) : allFilters;
   const overflowFilters = responsiveOverflow ? allFilters.slice(Math.min(visibleFilterCount, allFilters.length)) : [];
   const activeOverflowCount = overflowFilters.filter(filterBarUtils.isFilterBarFilterActive).length;
@@ -134,7 +139,8 @@ function FilterBar({
     "div",
     {
       className: utils.cn(
-        "flex flex-nowrap items-center gap-2 overflow-visible rounded-lg border border-input bg-background px-2 py-1.5 shadow-sm",
+        "flex flex-nowrap items-center gap-2 overflow-visible bg-background py-1.5",
+        "flex-wrap md:flex-nowrap",
         overflowMode === "wrap" && "flex-wrap",
         className
       ),
@@ -172,9 +178,16 @@ function FilterBar({
             ...onApply ? { onApply } : {}
           }
         ),
-        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 flex-nowrap items-center gap-2", children: [
+        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-2", children: [
           dateRange && /* @__PURE__ */ jsxRuntime.jsx(RangeControlButton, { kind: "date", label: "Date range", ...dateRange }),
-          timeRange && /* @__PURE__ */ jsxRuntime.jsx(RangeControlButton, { kind: "time", label: "Time range", ...timeRange }),
+          timeRange && /* @__PURE__ */ jsxRuntime.jsx(
+            RangeControlButton,
+            {
+              kind: timeRange.timeEnabled === false ? "date" : "time",
+              label: timeRange.timeEnabled === false ? "Date range" : "Time range",
+              ...timeRange
+            }
+          ),
           trailing,
           showApply && /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
@@ -325,7 +338,7 @@ function OverflowFiltersMenu({
           {
             role: "dialog",
             "aria-label": "Overflow filters",
-            className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 w-[min(34rem,calc(100vw-2rem))] overflow-visible rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+            className: "fixed inset-x-2 bottom-4 top-16 z-50 flex flex-col overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/10 md:absolute md:bottom-auto md:left-auto md:right-0 md:top-[calc(100%+0.375rem)] md:block md:w-[min(34rem,calc(100vw-2rem))] md:overflow-visible md:shadow-black/5",
             onClick: (event) => event.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
@@ -354,13 +367,13 @@ function OverflowFiltersMenu({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/70 rounded-md border border-border/70", children: stagedFilters.map((filter) => {
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto rounded-md border border-border/70 md:overflow-visible", children: stagedFilters.map((filter) => {
                 const active = filterBarUtils.isFilterBarFilterActive(filter);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     "data-overflow-filter-row": filter.key,
-                    className: "grid h-12 grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] items-center gap-2 overflow-visible p-2",
+                    className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 overflow-visible p-3 md:h-12 md:grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] md:items-center md:p-2",
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "label",
@@ -380,8 +393,8 @@ function OverflowFiltersMenu({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "=" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 min-w-0 overflow-visible md:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
@@ -684,7 +697,7 @@ function BooleanFilterField({ filter }) {
 }
 function SearchField({ search }) {
   const [draft, setDraft] = useDebouncedTextDraft(search.value, search.onChange);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-[14rem] max-w-[24rem] flex-1 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-[1_1_14rem] items-center gap-2 md:min-w-[14rem] md:max-w-[24rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
       className: utils.cn(
@@ -748,7 +761,7 @@ function sizedIcon(icon, px) {
   if (!react.isValidElement(icon)) return icon;
   const el = icon;
   return react.cloneElement(el, {
-    style: { width: `${px}px`, height: `${px}px`, ...el.props.style ?? {} }
+    style: { width: `${px}px`, height: `${px}px`, ...el.props.style }
   });
 }
 function comboboxLabelProps(filter) {
@@ -1864,6 +1877,25 @@ function useDismissablePopup(open, rootRef, triggerRef, onClose) {
     };
   }, [onClose, open, rootRef, triggerRef]);
 }
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia(query).matches;
+  });
+  react.useEffect(() => {
+    var _a;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const media = window.matchMedia(query);
+    const onChange = () => setMatches(media.matches);
+    onChange();
+    (_a = media.addEventListener) == null ? void 0 : _a.call(media, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = media.removeEventListener) == null ? void 0 : _a2.call(media, "change", onChange);
+    };
+  }, [query]);
+  return matches;
+}
 function summarizeMultiFilter(label, value) {
   const includeCount = Object.values(value).filter((mode) => mode === "include").length;
   const excludeCount = Object.values(value).filter((mode) => mode === "exclude").length;
@@ -2176,5 +2208,4 @@ exports.FilterBar = FilterBar;
 exports.FilterBarFilterPanel = FilterBarFilterPanel;
 exports.FilterBarRangePanel = FilterBarRangePanel;
 exports.TriStateMultiSelect = TriStateMultiSelect;
-exports.applyFilterExtensions = applyFilterExtensions;
 //# sourceMappingURL=FilterBar.cjs.map