@informedai/react 0.2.2 → 0.2.4

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 (3) hide show
  1. package/dist/index.js +80 -63
  2. package/dist/index.mjs +81 -64
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -704,48 +704,73 @@ function AssistantWidget({ className, theme, position = "inline", defaultCollaps
704
704
  }
705
705
  );
706
706
  }
707
+ function QuickActionButton({
708
+ action,
709
+ theme,
710
+ onClick
711
+ }) {
712
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
713
+ "button",
714
+ {
715
+ onClick,
716
+ style: {
717
+ display: "inline-flex",
718
+ alignItems: "center",
719
+ gap: "6px",
720
+ padding: "6px 12px",
721
+ backgroundColor: "#f5f5f5",
722
+ border: "none",
723
+ borderRadius: "8px",
724
+ fontSize: "12px",
725
+ fontWeight: 500,
726
+ cursor: "pointer",
727
+ color: "#525252",
728
+ transition: "all 0.15s"
729
+ },
730
+ onMouseOver: (e) => {
731
+ e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
732
+ e.currentTarget.style.color = theme.primaryColor;
733
+ },
734
+ onMouseOut: (e) => {
735
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
736
+ e.currentTarget.style.color = "#525252";
737
+ },
738
+ children: [
739
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRightIcon, { size: 14, color: "currentColor" }),
740
+ action.label
741
+ ]
742
+ }
743
+ );
744
+ }
707
745
  function MessageBubble({ message, theme, onQuickAction }) {
708
746
  const isUser = message.role === "user";
709
747
  const hasQuickActions = message.quickActions && message.quickActions.length > 0;
710
748
  if ((message.type === "quick_actions" || !message.content) && hasQuickActions) {
711
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: message.quickActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
712
- "button",
749
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
750
+ display: "flex",
751
+ flexWrap: "wrap",
752
+ justifyContent: "center",
753
+ gap: "8px",
754
+ padding: "8px 0"
755
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
756
+ QuickActionButton,
713
757
  {
714
- onClick: () => onQuickAction(action),
715
- style: {
716
- padding: "8px 14px",
717
- backgroundColor: "#f5f5f5",
718
- border: "1px solid #e5e5e5",
719
- borderRadius: "20px",
720
- fontSize: "13px",
721
- cursor: "pointer",
722
- color: theme.textColor,
723
- transition: "all 0.15s"
724
- },
725
- onMouseOver: (e) => {
726
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}15`;
727
- e.currentTarget.style.borderColor = theme.primaryColor;
728
- },
729
- onMouseOut: (e) => {
730
- e.currentTarget.style.backgroundColor = "#f5f5f5";
731
- e.currentTarget.style.borderColor = "#e5e5e5";
732
- },
733
- children: action.label
758
+ action,
759
+ theme,
760
+ onClick: () => onQuickAction(action)
734
761
  },
735
762
  action.id || action.action || index
736
763
  )) });
737
764
  }
738
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
739
- "div",
740
- {
741
- style: {
742
- display: "flex",
743
- flexDirection: "column",
744
- alignItems: isUser ? "flex-end" : "flex-start",
745
- gap: "8px"
746
- },
747
- children: [
748
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
765
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
766
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
767
+ "div",
768
+ {
769
+ style: {
770
+ display: "flex",
771
+ justifyContent: isUser ? "flex-end" : "flex-start"
772
+ },
773
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
749
774
  "div",
750
775
  {
751
776
  style: {
@@ -762,36 +787,25 @@ function MessageBubble({ message, theme, onQuickAction }) {
762
787
  },
763
788
  children: message.content
764
789
  }
765
- ),
766
- hasQuickActions && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", maxWidth: "85%" }, children: message.quickActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
767
- "button",
768
- {
769
- onClick: () => onQuickAction(action),
770
- style: {
771
- padding: "8px 14px",
772
- backgroundColor: "#f5f5f5",
773
- border: "1px solid #e5e5e5",
774
- borderRadius: "20px",
775
- fontSize: "13px",
776
- cursor: "pointer",
777
- color: theme.textColor,
778
- transition: "all 0.15s"
779
- },
780
- onMouseOver: (e) => {
781
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}15`;
782
- e.currentTarget.style.borderColor = theme.primaryColor;
783
- },
784
- onMouseOut: (e) => {
785
- e.currentTarget.style.backgroundColor = "#f5f5f5";
786
- e.currentTarget.style.borderColor = "#e5e5e5";
787
- },
788
- children: action.label
789
- },
790
- action.id || action.action || index
791
- )) })
792
- ]
793
- }
794
- );
790
+ )
791
+ }
792
+ ),
793
+ hasQuickActions && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
794
+ display: "flex",
795
+ flexWrap: "wrap",
796
+ justifyContent: "center",
797
+ gap: "8px",
798
+ padding: "8px 0"
799
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
800
+ QuickActionButton,
801
+ {
802
+ action,
803
+ theme,
804
+ onClick: () => onQuickAction(action)
805
+ },
806
+ action.id || action.action || index
807
+ )) })
808
+ ] });
795
809
  }
796
810
  function SparklesIcon({ color = "currentColor" }) {
797
811
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", children: [
@@ -806,6 +820,9 @@ function ChatIcon({ color = "currentColor" }) {
806
820
  function MinimizeIcon() {
807
821
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 9l-7 7-7-7" }) });
808
822
  }
823
+ function ChevronRightIcon({ size = 16, color = "currentColor" }) {
824
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 18l6-6-6-6" }) });
825
+ }
809
826
  function LoadingSpinner({ size = 20 }) {
810
827
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
811
828
  "svg",
package/dist/index.mjs CHANGED
@@ -318,7 +318,7 @@ function InformedAIProvider({ config, children }) {
318
318
  }
319
319
 
320
320
  // src/components/InformedAssistant.tsx
321
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
321
+ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
322
322
  var defaultTheme = {
323
323
  primaryColor: "#f59e0b",
324
324
  // Amber
@@ -674,48 +674,73 @@ function AssistantWidget({ className, theme, position = "inline", defaultCollaps
674
674
  }
675
675
  );
676
676
  }
677
+ function QuickActionButton({
678
+ action,
679
+ theme,
680
+ onClick
681
+ }) {
682
+ return /* @__PURE__ */ jsxs(
683
+ "button",
684
+ {
685
+ onClick,
686
+ style: {
687
+ display: "inline-flex",
688
+ alignItems: "center",
689
+ gap: "6px",
690
+ padding: "6px 12px",
691
+ backgroundColor: "#f5f5f5",
692
+ border: "none",
693
+ borderRadius: "8px",
694
+ fontSize: "12px",
695
+ fontWeight: 500,
696
+ cursor: "pointer",
697
+ color: "#525252",
698
+ transition: "all 0.15s"
699
+ },
700
+ onMouseOver: (e) => {
701
+ e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
702
+ e.currentTarget.style.color = theme.primaryColor;
703
+ },
704
+ onMouseOut: (e) => {
705
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
706
+ e.currentTarget.style.color = "#525252";
707
+ },
708
+ children: [
709
+ /* @__PURE__ */ jsx2(ChevronRightIcon, { size: 14, color: "currentColor" }),
710
+ action.label
711
+ ]
712
+ }
713
+ );
714
+ }
677
715
  function MessageBubble({ message, theme, onQuickAction }) {
678
716
  const isUser = message.role === "user";
679
717
  const hasQuickActions = message.quickActions && message.quickActions.length > 0;
680
718
  if ((message.type === "quick_actions" || !message.content) && hasQuickActions) {
681
- return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
682
- "button",
719
+ return /* @__PURE__ */ jsx2("div", { style: {
720
+ display: "flex",
721
+ flexWrap: "wrap",
722
+ justifyContent: "center",
723
+ gap: "8px",
724
+ padding: "8px 0"
725
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
726
+ QuickActionButton,
683
727
  {
684
- onClick: () => onQuickAction(action),
685
- style: {
686
- padding: "8px 14px",
687
- backgroundColor: "#f5f5f5",
688
- border: "1px solid #e5e5e5",
689
- borderRadius: "20px",
690
- fontSize: "13px",
691
- cursor: "pointer",
692
- color: theme.textColor,
693
- transition: "all 0.15s"
694
- },
695
- onMouseOver: (e) => {
696
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}15`;
697
- e.currentTarget.style.borderColor = theme.primaryColor;
698
- },
699
- onMouseOut: (e) => {
700
- e.currentTarget.style.backgroundColor = "#f5f5f5";
701
- e.currentTarget.style.borderColor = "#e5e5e5";
702
- },
703
- children: action.label
728
+ action,
729
+ theme,
730
+ onClick: () => onQuickAction(action)
704
731
  },
705
732
  action.id || action.action || index
706
733
  )) });
707
734
  }
708
- return /* @__PURE__ */ jsxs(
709
- "div",
710
- {
711
- style: {
712
- display: "flex",
713
- flexDirection: "column",
714
- alignItems: isUser ? "flex-end" : "flex-start",
715
- gap: "8px"
716
- },
717
- children: [
718
- /* @__PURE__ */ jsx2(
735
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
736
+ /* @__PURE__ */ jsx2(
737
+ "div",
738
+ {
739
+ style: {
740
+ display: "flex",
741
+ justifyContent: isUser ? "flex-end" : "flex-start"
742
+ },
743
+ children: /* @__PURE__ */ jsx2(
719
744
  "div",
720
745
  {
721
746
  style: {
@@ -732,36 +757,25 @@ function MessageBubble({ message, theme, onQuickAction }) {
732
757
  },
733
758
  children: message.content
734
759
  }
735
- ),
736
- hasQuickActions && /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", maxWidth: "85%" }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
737
- "button",
738
- {
739
- onClick: () => onQuickAction(action),
740
- style: {
741
- padding: "8px 14px",
742
- backgroundColor: "#f5f5f5",
743
- border: "1px solid #e5e5e5",
744
- borderRadius: "20px",
745
- fontSize: "13px",
746
- cursor: "pointer",
747
- color: theme.textColor,
748
- transition: "all 0.15s"
749
- },
750
- onMouseOver: (e) => {
751
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}15`;
752
- e.currentTarget.style.borderColor = theme.primaryColor;
753
- },
754
- onMouseOut: (e) => {
755
- e.currentTarget.style.backgroundColor = "#f5f5f5";
756
- e.currentTarget.style.borderColor = "#e5e5e5";
757
- },
758
- children: action.label
759
- },
760
- action.id || action.action || index
761
- )) })
762
- ]
763
- }
764
- );
760
+ )
761
+ }
762
+ ),
763
+ hasQuickActions && /* @__PURE__ */ jsx2("div", { style: {
764
+ display: "flex",
765
+ flexWrap: "wrap",
766
+ justifyContent: "center",
767
+ gap: "8px",
768
+ padding: "8px 0"
769
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
770
+ QuickActionButton,
771
+ {
772
+ action,
773
+ theme,
774
+ onClick: () => onQuickAction(action)
775
+ },
776
+ action.id || action.action || index
777
+ )) })
778
+ ] });
765
779
  }
766
780
  function SparklesIcon({ color = "currentColor" }) {
767
781
  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", children: [
@@ -776,6 +790,9 @@ function ChatIcon({ color = "currentColor" }) {
776
790
  function MinimizeIcon() {
777
791
  return /* @__PURE__ */ jsx2("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M19 9l-7 7-7-7" }) });
778
792
  }
793
+ function ChevronRightIcon({ size = 16, color = "currentColor" }) {
794
+ return /* @__PURE__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M9 18l6-6-6-6" }) });
795
+ }
779
796
  function LoadingSpinner({ size = 20 }) {
780
797
  return /* @__PURE__ */ jsxs(
781
798
  "svg",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@informedai/react",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "React SDK for InformedAI Assistant - AI-powered content creation widget",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",