@informedai/react 0.2.2 → 0.2.3

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 +63 -45
  2. package/dist/index.mjs +63 -45
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -704,33 +704,60 @@ 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
  )) });
@@ -742,7 +769,7 @@ function MessageBubble({ message, theme, onQuickAction }) {
742
769
  display: "flex",
743
770
  flexDirection: "column",
744
771
  alignItems: isUser ? "flex-end" : "flex-start",
745
- gap: "8px"
772
+ gap: "10px"
746
773
  },
747
774
  children: [
748
775
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -763,29 +790,17 @@ function MessageBubble({ message, theme, onQuickAction }) {
763
790
  children: message.content
764
791
  }
765
792
  ),
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",
793
+ hasQuickActions && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
794
+ display: "flex",
795
+ flexWrap: "wrap",
796
+ gap: "8px",
797
+ maxWidth: "100%"
798
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
799
+ QuickActionButton,
768
800
  {
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
801
+ action,
802
+ theme,
803
+ onClick: () => onQuickAction(action)
789
804
  },
790
805
  action.id || action.action || index
791
806
  )) })
@@ -806,6 +821,9 @@ function ChatIcon({ color = "currentColor" }) {
806
821
  function MinimizeIcon() {
807
822
  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
823
  }
824
+ function ChevronRightIcon({ size = 16, color = "currentColor" }) {
825
+ 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" }) });
826
+ }
809
827
  function LoadingSpinner({ size = 20 }) {
810
828
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
811
829
  "svg",
package/dist/index.mjs CHANGED
@@ -674,33 +674,60 @@ 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
  )) });
@@ -712,7 +739,7 @@ function MessageBubble({ message, theme, onQuickAction }) {
712
739
  display: "flex",
713
740
  flexDirection: "column",
714
741
  alignItems: isUser ? "flex-end" : "flex-start",
715
- gap: "8px"
742
+ gap: "10px"
716
743
  },
717
744
  children: [
718
745
  /* @__PURE__ */ jsx2(
@@ -733,29 +760,17 @@ function MessageBubble({ message, theme, onQuickAction }) {
733
760
  children: message.content
734
761
  }
735
762
  ),
736
- hasQuickActions && /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", maxWidth: "85%" }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
737
- "button",
763
+ hasQuickActions && /* @__PURE__ */ jsx2("div", { style: {
764
+ display: "flex",
765
+ flexWrap: "wrap",
766
+ gap: "8px",
767
+ maxWidth: "100%"
768
+ }, children: message.quickActions.map((action, index) => /* @__PURE__ */ jsx2(
769
+ QuickActionButton,
738
770
  {
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
771
+ action,
772
+ theme,
773
+ onClick: () => onQuickAction(action)
759
774
  },
760
775
  action.id || action.action || index
761
776
  )) })
@@ -776,6 +791,9 @@ function ChatIcon({ color = "currentColor" }) {
776
791
  function MinimizeIcon() {
777
792
  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
793
  }
794
+ function ChevronRightIcon({ size = 16, color = "currentColor" }) {
795
+ 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" }) });
796
+ }
779
797
  function LoadingSpinner({ size = 20 }) {
780
798
  return /* @__PURE__ */ jsxs(
781
799
  "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.3",
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",