diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
index 0ec1a8183..c24e5c01e 100644
--- a/packages/react/src/components/ChatHeader/ChatHeader.js
+++ b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -354,7 +354,7 @@ const ChatHeader = ({
) : (
<>
-
+
{
setFullScreen((prev) => !prev);
diff --git a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
index f7ccf700f..2a70ff215 100644
--- a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
@@ -111,7 +111,7 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
)}
{formatter.map((item, index) => (
-
+
{
))}
-
+
-
+
-
+
{' '}
setOpen(!isOpen)} />
diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
index 8826bc026..d16012d46 100644
--- a/packages/react/src/components/Message/MessageToolbox.js
+++ b/packages/react/src/components/Message/MessageToolbox.js
@@ -10,6 +10,7 @@ import { Modal } from '../Modal';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { parseEmoji } from '../../lib/emoji';
+import { Tooltip } from '../Tooltip';
const MessageToolboxWrapperCss = css`
display: none;
@@ -88,30 +89,36 @@ export const MessageToolbox = ({
{...props}
>
{!isThreadMessage ? (
+
+
+
+ ) : null}
+
u._id === authenticatedUserId)
+ ? 'star-filled'
+ : 'star'
+ }`}
+ onClick={() => handleStarMessage(message)}
/>
- ) : null}
- u._id === authenticatedUserId)
- ? 'star-filled'
- : 'star'
- }`}
- onClick={() => handleStarMessage(message)}
- />
- setEmojiOpen(true)}
- />
+
+
+ setEmojiOpen(true)}
+ />
+
{!isThreadMessage && (
- handlePinMessage(message)}
- />
- )}
- {message.u._id === authenticatedUserId && (
- <>
- handleEditMessage(message)}
- />
+
handleClickDelete(message)}
+ icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
+ onClick={() => handlePinMessage(message)}
/>
+
+ )}
+ {message.u._id === authenticatedUserId && (
+ <>
+
+ handleEditMessage(message)}
+ />
+
+
+ handleClickDelete(message)}
+ />
+
)}
- handlerReportMessage(message)}
- />
+
+ handlerReportMessage(message)}
+ />
+
{showDeleteModal && (
diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index f014ae9dc..dbf38fb3e 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/packages/react/src/components/Tooltip/Tooltip.js
@@ -1,19 +1,17 @@
import React, { useState } from 'react';
-const Tooltip = ({ children, text, position }) => {
+const Tooltip = ({ children, text, position, X, Y }) => {
const [isTooltipVisible, setTooltipVisible] = useState(false);
-
+ let touchTimer;
const tooltipStyle = {
position: 'absolute',
- left: '64%',
- transform: 'translateX(-50%) ',
- backgroundColor: 'rgba(97, 97, 97, 1)',
+ backgroundColor: 'black',
color: 'white',
- padding: '4px',
+ padding: '4.5px',
borderRadius: '3px',
- boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
- zIndex: 9999,
- fontSize: '12.5px',
+ boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
+ zIndex: 999,
+ fontSize: '13.8px',
whiteSpace: 'nowrap',
fontFamily: 'sans-serif',
};
@@ -25,35 +23,50 @@ const Tooltip = ({ children, text, position }) => {
marginLeft: '-5px',
borderWidth: '6px',
borderStyle: 'solid',
- borderColor: 'rgba(97, 97, 97, 1) transparent transparent transparent',
+ borderColor: 'black transparent transparent transparent',
+ zIndex: 999,
};
- // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
+ const Adjust = (A, B) => {
+ let AB = '';
+ if (A != null) {
+ AB = `${AB}translateX(${A})`;
+ tooltipStyle.transform = AB;
+ }
+ if (B != null) {
+ AB = `${AB}translateY(${B})`;
+ tooltipStyle.transform = AB;
+ }
+ };
+ // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
if (position === 'top') {
tooltipStyle.top = '-100%';
tooltipArrowStyle.top = '100%';
- tooltipArrowStyle.transform = 'translateX(-50%)';
+ Adjust(X, Y);
} else if (position === 'bottom') {
tooltipStyle.top = '100%';
+ tooltipStyle.transform = 'translateY(45%) translateX(-55%)';
tooltipArrowStyle.bottom = '100%';
- tooltipArrowStyle.transform = 'translateX(-50%) rotate(180deg)';
+ tooltipArrowStyle.transform = 'rotate(180deg)';
+ Adjust(X, Y);
}
const handleMouseEnter = () => {
- setTooltipVisible(true);
+ touchTimer = setTimeout(() => {
+ setTooltipVisible(true);
+ }, 300);
};
const handleMouseLeave = () => {
+ clearTimeout(touchTimer);
setTooltipVisible(false);
};
- let touchTimer;
-
const handleTouchStart = () => {
touchTimer = setTimeout(() => {
setTooltipVisible(true);
- }, 500);
+ }, 400);
};
const handleTouchEnd = () => {