@banbox/chat 1.0.17 → 1.0.19

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 (20) hide show
  1. package/dist/index.cjs +191 -166
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +191 -166
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/chat/ChatImagePreviewModal.tsx +55 -47
  7. package/src/chat/SinglePopup.tsx +81 -31
  8. package/src/modals/ChatTranslateSettingsModal.tsx +2 -2
  9. package/src/ui/AttachmentPreviewStrip.tsx +17 -12
  10. package/src/ui/ChatComposerBar.tsx +21 -13
  11. package/src/ui/ChatFooter.tsx +21 -11
  12. package/src/ui/ChatInquiryBar.tsx +1 -1
  13. package/src/ui/ChatThreadItem.tsx +1 -1
  14. package/src/ui/MessageHoverActions.tsx +2 -2
  15. package/src/ui/ReplyCard.tsx +1 -1
  16. package/src/ui/Select.tsx +2 -1
  17. package/src/ui/drop-up/BusinessCardDropup.tsx +1 -1
  18. package/src/ui/drop-up/EmojiDropup.tsx +3 -3
  19. package/src/ui/message-items/ChatBubbleAudio.tsx +1 -1
  20. package/src/ui/message-items/ChatBubbleFiles.tsx +8 -2
package/src/ui/MessageHoverActions.tsx CHANGED
@@ -87,7 +87,7 @@ const MessageHoverActions: React.FC<Props> = ({
87
87
  onReply?.();
88
88
  }}
89
89
  className={clsx(
90
- "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
90
+ "inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
91
91
  isActive("replay") && "bg-[#636363] text-white",
92
92
  )}
93
93
  >
@@ -118,7 +118,7 @@ const MessageHoverActions: React.FC<Props> = ({
118
118
  onTranslate?.();
119
119
  }}
120
120
  className={clsx(
121
- "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
121
+ "inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
122
122
  isActive("translate") && "bg-[#636363]! text-white",
123
123
  )}
124
124
  >
package/src/ui/ReplyCard.tsx CHANGED
@@ -129,7 +129,7 @@ const ReplyCard: React.FC<Props> = ({ refMsg, onClose, compact, className, jumpO
129
129
  <button
130
130
  type="button"
131
131
  onClick={onClose}
132
- className="absolute right-3 top-1/2 -translate-y-1/2 grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:text-[#FF5300]"
132
+ className="absolute right-3 top-1/2 -translate-y-1/2 grid h-8 w-8 cursor-pointer place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:text-[#FF5300]"
133
133
  title="Remove"
134
134
  aria-label="Remove"
135
135
  >
package/src/ui/Select.tsx CHANGED
@@ -37,6 +37,7 @@ const Select: React.FC<Props> = ({ options, value, onChange, placeholder = "Sele
37
37
  className={cn(
38
38
  "flex w-full items-center justify-between rounded-[4px] border border-[#cacaca] bg-white px-3 text-[13px] text-left",
39
39
  disabled && "cursor-not-allowed opacity-50",
40
+ !disabled && "cursor-pointer",
40
41
  )}
41
42
  style={{ height: size }}
42
43
  >
@@ -54,7 +55,7 @@ const Select: React.FC<Props> = ({ options, value, onChange, placeholder = "Sele
54
55
  key={opt.value}
55
56
  type="button"
56
57
  className={cn(
57
- "flex w-full items-center px-3 py-2 text-[13px] text-left hover:bg-black/5",
58
+ "flex w-full cursor-pointer items-center px-3 py-2 text-[13px] text-left hover:bg-black/5",
58
59
  opt.value === value && "bg-black/5 font-medium",
59
60
  )}
60
61
  onClick={() => {
package/src/ui/drop-up/BusinessCardDropup.tsx CHANGED
@@ -171,7 +171,7 @@ const BusinessCardDropup = ({
171
171
  type="button"
172
172
  onClick={onClose}
173
173
  aria-label="Close"
174
- className="grid h-8 w-8 place-items-center rounded-full hover:bg-black/5"
174
+ className="grid h-8 w-8 cursor-pointer place-items-center rounded-full hover:bg-black/5"
175
175
  >
176
176
  <ChatXIcon className="h-6 w-6" />
177
177
  </button>
package/src/ui/drop-up/EmojiDropup.tsx CHANGED
@@ -74,7 +74,8 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
74
74
  return;
75
75
  }
76
76
  const onDoc = (e: MouseEvent) => {
77
- if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
77
+ const target = e.target as Node;
78
+ if (panelRef.current && !panelRef.current.contains(target) && (!anchorRef?.current || !anchorRef.current.contains(target))) {
78
79
  onClose();
79
80
  }
80
81
  };
@@ -111,10 +112,9 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
111
112
  <button
112
113
  key={i}
113
114
  type="button"
114
- className="emoji-dropup__item"
115
+ className="emoji-dropup__item cursor-pointer"
115
116
  onClick={() => {
116
117
  onSelect(e);
117
- onClose();
118
118
  }}
119
119
  aria-label={`Insert ${e}`}
120
120
  >
package/src/ui/message-items/ChatBubbleAudio.tsx CHANGED
@@ -153,7 +153,7 @@ const ChatBubbleAudio: React.FC<{ mine: boolean; audio: ChatAudio }> = ({ mine,
153
153
  aria-label={playing ? "Pause" : "Play"}
154
154
  onClick={toggle}
155
155
  className={clsx(
156
- "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
156
+ "grid h-7 w-[34px] cursor-pointer place-items-center rounded-md transition-colors",
157
157
  mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]",
158
158
  )}
159
159
  >
package/src/ui/message-items/ChatBubbleFiles.tsx CHANGED
@@ -34,8 +34,14 @@ const FileChip: React.FC<{ file: ChatFile }> = ({ file }) => (
34
34
  <div className="flex min-w-0 items-center gap-2">
35
35
  <div className="min-w-0">
36
36
  <div className="flex items-center gap-1">
37
- <FileIcon className={clsx("h-[18px] w-[18px]", extColor(file.ext))} />{" "}
38
- <div className="truncate text-xs font-normal text-black">{file.name}</div>
37
+ <span>
38
+ <FileIcon
39
+ className={clsx("h-[18px] w-[18px]", extColor(file.ext))}
40
+ />
41
+ </span>{" "}
42
+ <div className="truncate text-xs font-normal text-black">
43
+ {file.name}
44
+ </div>
39
45
  </div>
40
46
  <div className="flex items-center gap-2 text-[10px] text-[#636363] mt-2">
41
47
  <span>{file.sizeMB.toFixed(1)} MB</span>