@wallavi/widget 1.4.1 → 1.4.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 (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +34 -10
  4. package/dist/index.mjs +34 -10
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -144,7 +144,7 @@ interface BubbleWidgetProps extends ChatWidgetConfig {
144
144
  */
145
145
  onOpenChange?: (open: boolean) => void;
146
146
  }
147
- declare function BubbleWidget({ position: positionProp, width, height, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize, panelClassName, autoConfig, hideBubble, isOpen: isOpenProp, onOpenChange, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
147
+ declare function BubbleWidget({ position: positionProp, width: widthProp, height: heightProp, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize: bubbleSizeProp, panelClassName, autoConfig, hideBubble, isOpen: isOpenProp, onOpenChange, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
148
148
 
149
149
  declare function ChatWidget({ agentId, workspaceId, agentName, displayName, profilePicture, userMessageColor, initialMessages, suggestedMessages, messagePlaceholder, watermark, watermarkLogoUrl, footer, theme, showThinking, regenerateMessage, persist, onNavigate, hideCloseButton, source, userContext, playgroundOverrides, className, onClose, onReset, onExpand, expanded, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
150
150
 
package/dist/index.d.ts CHANGED
@@ -144,7 +144,7 @@ interface BubbleWidgetProps extends ChatWidgetConfig {
144
144
  */
145
145
  onOpenChange?: (open: boolean) => void;
146
146
  }
147
- declare function BubbleWidget({ position: positionProp, width, height, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize, panelClassName, autoConfig, hideBubble, isOpen: isOpenProp, onOpenChange, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
147
+ declare function BubbleWidget({ position: positionProp, width: widthProp, height: heightProp, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize: bubbleSizeProp, panelClassName, autoConfig, hideBubble, isOpen: isOpenProp, onOpenChange, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
148
148
 
149
149
  declare function ChatWidget({ agentId, workspaceId, agentName, displayName, profilePicture, userMessageColor, initialMessages, suggestedMessages, messagePlaceholder, watermark, watermarkLogoUrl, footer, theme, showThinking, regenerateMessage, persist, onNavigate, hideCloseButton, source, userContext, playgroundOverrides, className, onClose, onReset, onExpand, expanded, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
150
150
 
package/dist/index.js CHANGED
@@ -772,6 +772,9 @@ var EMPTY = {
772
772
  autoOpen: false,
773
773
  keyboardShortcut: false,
774
774
  position: "bottom-right",
775
+ bubbleSize: 52,
776
+ panelWidth: 360,
777
+ panelHeight: 580,
775
778
  loading: false
776
779
  };
777
780
  function useAutoConfig(agentId, enabled) {
@@ -808,6 +811,9 @@ function useAutoConfig(agentId, enabled) {
808
811
  autoOpen: Boolean(cfg.autoOpen),
809
812
  keyboardShortcut: Boolean(cfg.keyboardShortcut),
810
813
  position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
814
+ bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
815
+ panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
816
+ panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
811
817
  loading: false
812
818
  });
813
819
  }).catch(() => {
@@ -824,15 +830,15 @@ var KEY_EXPANDED = "wallavi_bubble_expanded";
824
830
  var KEY_DISMISSED = "wallavi_bubble_dismissed";
825
831
  function BubbleWidget({
826
832
  position: positionProp,
827
- width = 360,
828
- height = 580,
833
+ width: widthProp,
834
+ height: heightProp,
829
835
  expandedWidth = 640,
830
836
  expandedHeight = "calc(100vh - 100px)",
831
837
  keyboardShortcut: keyboardShortcutProp = false,
832
838
  shortcutKey = "k",
833
839
  autoOpen: autoOpenProp = false,
834
840
  bubbleIconUrl: bubbleIconUrlProp,
835
- bubbleSize = 52,
841
+ bubbleSize: bubbleSizeProp,
836
842
  panelClassName,
837
843
  autoConfig = true,
838
844
  hideBubble = false,
@@ -844,9 +850,21 @@ function BubbleWidget({
844
850
  const [internalOpen, setInternalOpen] = react.useState(false);
845
851
  const open = isControlled ? isOpenProp : internalOpen;
846
852
  const setOpen = react.useCallback((valueOrUpdater) => {
847
- const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
848
- if (!isControlled) setInternalOpen(next);
849
- onOpenChange?.(next);
853
+ if (!isControlled) {
854
+ if (typeof valueOrUpdater === "function") {
855
+ setInternalOpen((prev) => {
856
+ const next = valueOrUpdater(prev);
857
+ onOpenChange?.(next);
858
+ return next;
859
+ });
860
+ } else {
861
+ setInternalOpen(valueOrUpdater);
862
+ onOpenChange?.(valueOrUpdater);
863
+ }
864
+ } else {
865
+ const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
866
+ onOpenChange?.(next);
867
+ }
850
868
  }, [isControlled, open, onOpenChange]);
851
869
  const [expanded, setExpanded] = react.useState(false);
852
870
  const panelRef = react.useRef(null);
@@ -859,12 +877,18 @@ function BubbleWidget({
859
877
  const [resolvedAutoOpen, setResolvedAutoOpen] = react.useState(autoOpenProp);
860
878
  const [resolvedKeyboardShortcut, setResolvedKeyboardShortcut] = react.useState(keyboardShortcutProp);
861
879
  const [resolvedPosition, setResolvedPosition] = react.useState(positionProp ?? "bottom-right");
880
+ const [resolvedBubbleSize, setResolvedBubbleSize] = react.useState(bubbleSizeProp ?? 52);
881
+ const [resolvedWidth, setResolvedWidth] = react.useState(widthProp ?? 360);
882
+ const [resolvedHeight, setResolvedHeight] = react.useState(heightProp ?? 580);
862
883
  react.useEffect(() => {
863
884
  if (remote.loading) return;
864
885
  if (!bubbleIconUrlProp) setResolvedBubbleIcon(remote.bubbleIconUrl);
865
886
  if (!autoOpenProp) setResolvedAutoOpen(remote.autoOpen);
866
887
  if (!keyboardShortcutProp) setResolvedKeyboardShortcut(remote.keyboardShortcut);
867
888
  if (!positionProp) setResolvedPosition(remote.position);
889
+ if (bubbleSizeProp == null) setResolvedBubbleSize(remote.bubbleSize);
890
+ if (widthProp == null) setResolvedWidth(remote.panelWidth);
891
+ if (heightProp == null) setResolvedHeight(remote.panelHeight);
868
892
  }, [remote.loading]);
869
893
  react.useEffect(() => {
870
894
  if (autoOpenProp) setResolvedAutoOpen(true);
@@ -926,8 +950,8 @@ function BubbleWidget({
926
950
  return next;
927
951
  });
928
952
  const isLeft = resolvedPosition === "bottom-left";
929
- const panelWidth = expanded ? Math.min(expandedWidth, typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth) : width;
930
- const panelHeight = expanded ? expandedHeight : height;
953
+ const panelWidth = expanded ? Math.min(expandedWidth, typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth) : resolvedWidth;
954
+ const panelHeight = expanded ? expandedHeight : resolvedHeight;
931
955
  return /* @__PURE__ */ jsxRuntime.jsxs(
932
956
  "div",
933
957
  {
@@ -971,8 +995,8 @@ function BubbleWidget({
971
995
  onClick: () => setOpen((v) => !v),
972
996
  title: open ? "Close chat" : "Open chat",
973
997
  style: {
974
- width: bubbleSize,
975
- height: bubbleSize,
998
+ width: resolvedBubbleSize,
999
+ height: resolvedBubbleSize,
976
1000
  borderRadius: "50%",
977
1001
  border: "1px solid rgba(0,0,0,0.1)",
978
1002
  boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
package/dist/index.mjs CHANGED
@@ -746,6 +746,9 @@ var EMPTY = {
746
746
  autoOpen: false,
747
747
  keyboardShortcut: false,
748
748
  position: "bottom-right",
749
+ bubbleSize: 52,
750
+ panelWidth: 360,
751
+ panelHeight: 580,
749
752
  loading: false
750
753
  };
751
754
  function useAutoConfig(agentId, enabled) {
@@ -782,6 +785,9 @@ function useAutoConfig(agentId, enabled) {
782
785
  autoOpen: Boolean(cfg.autoOpen),
783
786
  keyboardShortcut: Boolean(cfg.keyboardShortcut),
784
787
  position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
788
+ bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
789
+ panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
790
+ panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
785
791
  loading: false
786
792
  });
787
793
  }).catch(() => {
@@ -798,15 +804,15 @@ var KEY_EXPANDED = "wallavi_bubble_expanded";
798
804
  var KEY_DISMISSED = "wallavi_bubble_dismissed";
799
805
  function BubbleWidget({
800
806
  position: positionProp,
801
- width = 360,
802
- height = 580,
807
+ width: widthProp,
808
+ height: heightProp,
803
809
  expandedWidth = 640,
804
810
  expandedHeight = "calc(100vh - 100px)",
805
811
  keyboardShortcut: keyboardShortcutProp = false,
806
812
  shortcutKey = "k",
807
813
  autoOpen: autoOpenProp = false,
808
814
  bubbleIconUrl: bubbleIconUrlProp,
809
- bubbleSize = 52,
815
+ bubbleSize: bubbleSizeProp,
810
816
  panelClassName,
811
817
  autoConfig = true,
812
818
  hideBubble = false,
@@ -818,9 +824,21 @@ function BubbleWidget({
818
824
  const [internalOpen, setInternalOpen] = useState(false);
819
825
  const open = isControlled ? isOpenProp : internalOpen;
820
826
  const setOpen = useCallback((valueOrUpdater) => {
821
- const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
822
- if (!isControlled) setInternalOpen(next);
823
- onOpenChange?.(next);
827
+ if (!isControlled) {
828
+ if (typeof valueOrUpdater === "function") {
829
+ setInternalOpen((prev) => {
830
+ const next = valueOrUpdater(prev);
831
+ onOpenChange?.(next);
832
+ return next;
833
+ });
834
+ } else {
835
+ setInternalOpen(valueOrUpdater);
836
+ onOpenChange?.(valueOrUpdater);
837
+ }
838
+ } else {
839
+ const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
840
+ onOpenChange?.(next);
841
+ }
824
842
  }, [isControlled, open, onOpenChange]);
825
843
  const [expanded, setExpanded] = useState(false);
826
844
  const panelRef = useRef(null);
@@ -833,12 +851,18 @@ function BubbleWidget({
833
851
  const [resolvedAutoOpen, setResolvedAutoOpen] = useState(autoOpenProp);
834
852
  const [resolvedKeyboardShortcut, setResolvedKeyboardShortcut] = useState(keyboardShortcutProp);
835
853
  const [resolvedPosition, setResolvedPosition] = useState(positionProp ?? "bottom-right");
854
+ const [resolvedBubbleSize, setResolvedBubbleSize] = useState(bubbleSizeProp ?? 52);
855
+ const [resolvedWidth, setResolvedWidth] = useState(widthProp ?? 360);
856
+ const [resolvedHeight, setResolvedHeight] = useState(heightProp ?? 580);
836
857
  useEffect(() => {
837
858
  if (remote.loading) return;
838
859
  if (!bubbleIconUrlProp) setResolvedBubbleIcon(remote.bubbleIconUrl);
839
860
  if (!autoOpenProp) setResolvedAutoOpen(remote.autoOpen);
840
861
  if (!keyboardShortcutProp) setResolvedKeyboardShortcut(remote.keyboardShortcut);
841
862
  if (!positionProp) setResolvedPosition(remote.position);
863
+ if (bubbleSizeProp == null) setResolvedBubbleSize(remote.bubbleSize);
864
+ if (widthProp == null) setResolvedWidth(remote.panelWidth);
865
+ if (heightProp == null) setResolvedHeight(remote.panelHeight);
842
866
  }, [remote.loading]);
843
867
  useEffect(() => {
844
868
  if (autoOpenProp) setResolvedAutoOpen(true);
@@ -900,8 +924,8 @@ function BubbleWidget({
900
924
  return next;
901
925
  });
902
926
  const isLeft = resolvedPosition === "bottom-left";
903
- const panelWidth = expanded ? Math.min(expandedWidth, typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth) : width;
904
- const panelHeight = expanded ? expandedHeight : height;
927
+ const panelWidth = expanded ? Math.min(expandedWidth, typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth) : resolvedWidth;
928
+ const panelHeight = expanded ? expandedHeight : resolvedHeight;
905
929
  return /* @__PURE__ */ jsxs(
906
930
  "div",
907
931
  {
@@ -945,8 +969,8 @@ function BubbleWidget({
945
969
  onClick: () => setOpen((v) => !v),
946
970
  title: open ? "Close chat" : "Open chat",
947
971
  style: {
948
- width: bubbleSize,
949
- height: bubbleSize,
972
+ width: resolvedBubbleSize,
973
+ height: resolvedBubbleSize,
950
974
  borderRadius: "50%",
951
975
  border: "1px solid rgba(0,0,0,0.1)",
952
976
  boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
package/package.json CHANGED
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "private": false,
35
35
  "types": "./dist/index.d.ts",
36
- "version": "1.4.1",
36
+ "version": "1.4.3",
37
37
  "scripts": {
38
38
  "build": "tsup",
39
39
  "typecheck": "tsc --noEmit"