langgraph-ui-components 0.0.4 → 0.0.6

package/dist/index.es10.js

@@ -1,21 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { MessageSquareMoreIcon } from "lucide-react";
-function ChatButton({
-  isVisible,
-  setOpen
-}) {
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: () => setOpen(true),
-      "aria-label": "Open chat",
-      className: "fixed bottom-5 right-5 w-14 h-14 rounded-full bg-black text-white border-0 cursor-pointer flex items-center justify-center z-[60]",
-      children: /* @__PURE__ */ jsx(MessageSquareMoreIcon, { width: 24, height: 28 })
-    }
-  );
+import { useStreamContext } from "./index.es6.js";
+import { useGeneratedSuggestions } from "./index.es9.js";
+import { LiquidButton } from "./index.es25.js";
+function Suggestion() {
+  const stream = useStreamContext();
+  const agentSuggestions = stream.values?.suggestions;
+  const { suggestions, onSelect } = useGeneratedSuggestions({
+    instructions: "Your are an AI assistant that suggests relevant next actions for users to take in a chat interface.",
+    minSuggestions: 2,
+    maxSuggestions: 4,
+    suggestions: agentSuggestions
+    // Use agent-provided suggestions if available
+  });
+  const shortThreshold = 24;
+  const mediumThreshold = 48;
+  return /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, index) => {
+    const len = suggestion.length;
+    const sizeClass = len <= shortThreshold ? "max-w-[48%]" : len <= mediumThreshold ? "max-w-[72%]" : "w-full";
+    const handleClick = () => onSelect?.(suggestion);
+    return /* @__PURE__ */ jsx(
+      LiquidButton,
+      {
+        size: "sm",
+        className: `${sizeClass} text-center break-words`,
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx("span", { children: suggestion })
+      },
+      `suggestion-${index}-${suggestion.slice(0, 20)}`
+    );
+  }) }) });
 }
 export {
-  ChatButton as default
+  Suggestion as default
 };
 //# sourceMappingURL=index.es10.js.map

package/dist/index.es10.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es10.js","sources":["../src/components/ChatButton.tsx"],"sourcesContent":["import { MessageSquareMoreIcon } from \"lucide-react\";\n\nexport default function ChatButton({\n  isVisible,\n  setOpen,\n}: {\n  isVisible: boolean;\n  setOpen: (value: boolean) => void;\n}) {\n  if (!isVisible) return null;\n  return (\n    <button\n      onClick={() => setOpen(true)}\n      aria-label=\"Open chat\"\n      className=\"fixed bottom-5 right-5 w-14 h-14 rounded-full bg-black text-white border-0 cursor-pointer flex items-center justify-center z-[60]\"\n    >\n      <MessageSquareMoreIcon width={24} height={28} />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,WAAW;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA,oBAAC,uBAAA,EAAsB,OAAO,IAAI,QAAQ,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"index.es10.js","sources":["../src/components/Suggestion.tsx"],"sourcesContent":["import { useStreamContext } from \"@/providers/Stream\";\nimport { useGeneratedSuggestions } from \"@/providers/useChatSuggestions\";\nimport { LiquidButton } from \"@/components/ui/button\";\n\nexport default function Suggestion() {\n    const stream = useStreamContext();\n    const agentSuggestions = stream.values?.suggestions;\n\n    const { suggestions, onSelect } = useGeneratedSuggestions({\n        instructions: \"Your are an AI assistant that suggests relevant next actions for users to take in a chat interface.\",\n        minSuggestions: 2,\n        maxSuggestions: 4,\n        suggestions: agentSuggestions, // Use agent-provided suggestions if available\n    });\n\n    const shortThreshold = 24;\n    const mediumThreshold = 48;\n    return (\n        <div className=\"p-2\">\n            <div className=\"flex flex-wrap gap-2\">\n                {suggestions.map((suggestion, index) => {\n                    const len = suggestion.length;\n                    const sizeClass =\n                        len <= shortThreshold\n                            ? \"max-w-[48%]\"\n                            : len <= mediumThreshold\n                                ? \"max-w-[72%]\"\n                                : \"w-full\";\n\n                    const handleClick = () => onSelect?.(suggestion);\n\n                    return (\n                        <LiquidButton\n                            key={`suggestion-${index}-${suggestion.slice(0, 20)}`}\n                            size=\"sm\"\n                            className={`${sizeClass} text-center break-words`}\n                            onClick={handleClick}\n                        >\n                            <span>{suggestion}</span>\n                        </LiquidButton>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"names":[],"mappings":";;;;AAIA,SAAwB,aAAa;AACjC,QAAM,SAAS,iBAAA;AACf,QAAM,mBAAmB,OAAO,QAAQ;AAExC,QAAM,EAAE,aAAa,SAAA,IAAa,wBAAwB;AAAA,IACtD,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,aAAa;AAAA;AAAA,EAAA,CAChB;AAED,QAAM,iBAAiB;AACvB,QAAM,kBAAkB;AACxB,SACI,oBAAC,OAAA,EAAI,WAAU,OACX,UAAA,oBAAC,OAAA,EAAI,WAAU,wBACV,UAAA,YAAY,IAAI,CAAC,YAAY,UAAU;AACpC,UAAM,MAAM,WAAW;AACvB,UAAM,YACF,OAAO,iBACD,gBACA,OAAO,kBACH,gBACA;AAEd,UAAM,cAAc,MAAM,WAAW,UAAU;AAE/C,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,MAAK;AAAA,QACL,WAAW,GAAG,SAAS;AAAA,QACvB,SAAS;AAAA,QAET,UAAA,oBAAC,UAAM,UAAA,WAAA,CAAW;AAAA,MAAA;AAAA,MALb,cAAc,KAAK,IAAI,WAAW,MAAM,GAAG,EAAE,CAAC;AAAA,IAAA;AAAA,EAQ/D,CAAC,GACL,GACJ;AAER;"}