feat: UiKit Modal Support

packages/react/src/components/ChatBody/ChatBody.js

@@ -136,18 +136,21 @@ const ChatBody = ({
     setViewData(null);
   };
 
-  const onModalSubmit = useCallback(async (data, value) => {
-    console.log(data);
-    // const { actionId, value, blockId, appId, viewId } = data;
-    // await RCInstance?.triggerBlockAction({
-    //   rid: RCInstance.rid,
-    //   actionId,
-    //   value,
-    //   blockId,
-    //   appId,
-    //   viewId,
-    // });
-  });
+  const onModalSubmit = useCallback(
+    async (data) => {
+      console.log(data);
+      const { actionId, value, blockId, appId, viewId } = data;
+      await RCInstance?.triggerBlockAction({
+        rid: RCInstance.rid,
+        actionId,
+        value,
+        blockId,
+        appId,
+        viewId,
+      });
+    },
+    [RCInstance]
+  );
 
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {

packages/react/src/components/ChatInput/ChatInput.js

@@ -199,7 +199,9 @@ const ChatInput = ({ scrollToBottom }) => {
     if (!editMessage.msg) {
       if (message.startsWith('/')) {
         // its a slash command
-        const [command, params] = message.split(/\s+/);
+        const [command, ...paramsArray] = message.split(' ');
+        const params = paramsArray.join(' ');
+
         if (commands.find((c) => c.command === command.replace('/', ''))) {
           messageRef.current.value = '';
           setDisableButton(true);

packages/react/src/components/Icon/icons/Key.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Key = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="rcx-svg--directional"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M11 16C12.1037 16 13.1238 15.6424 13.9509 15.0368L14.7071 15.7929L14.7071 15.7929L16.7071 17.7929C16.9435 18.0293 17.0462 18.3683 16.9806 18.6961C16.7108 20.0453 17.1795 20.4527 17.2972 20.5357L20.1644 21.0136C20.6466 21.094 21 21.5112 21 22C21 22.6432 21.3583 23.3281 21.9265 23.9512C22.4706 24.548 23.0705 24.9379 23.3369 25.0569C24.2214 25.3161 24.7277 25.2995 24.9875 25.2288C25.1923 25.1731 25.2689 25.0825 25.3242 24.9471C25.4003 24.7605 25.4344 24.4559 25.3827 24.0428C25.3412 23.7106 25.2513 23.3653 25.1409 23.0551L15.7929 13.7071L15.797 13.703L15.4247 13.3307C15.792 12.6348 16 11.8417 16 11C16 8.23858 13.7614 6 11 6C8.23858 6 6 8.23858 6 11C6 13.7614 8.23858 16 11 16ZM17.7554 12.8411L26.7071 21.7929C26.8029 21.8887 26.8782 22.0029 26.9285 22.1286C27.1204 22.6085 27.2922 23.1942 27.3673 23.7947C27.4407 24.3816 27.433 25.0728 27.1759 25.7029C26.8978 26.3842 26.3494 26.931 25.5125 27.1587C24.7355 27.37 23.7975 27.2833 22.7127 26.9578L22.67 26.945L22.6286 26.9285C22.041 26.6934 21.1711 26.0912 20.4486 25.2988C19.8841 24.6797 19.3188 23.8448 19.0975 22.8634L16.8356 22.4864L16.7582 22.4735L16.6838 22.4487C15.6845 22.1156 14.7111 20.8956 14.9347 18.8489L13.5907 17.5049C12.7894 17.8244 11.9152 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 11.6372 17.9149 12.2545 17.7554 12.8411ZM12 10.5C12 9.67157 11.3284 9 10.5 9C9.67157 9 9 9.67157 9 10.5C9 11.3284 9.67157 12 10.5 12C11.3284 12 12 11.3284 12 10.5Z" />
+  </svg>
+);
+
+export default Key;

packages/react/src/components/Icon/icons/index.js

@@ -44,6 +44,7 @@ import Download from './Download';
 import At from './At';
 import ChevronDown from './ChevronDown';
 import ChevronLeft from './ChevronLeft';
+import Key from './Key';
 
 const icons = {
   file: File,
@@ -92,6 +93,7 @@ const icons = {
   at: At,
   'chevron-down': ChevronDown,
   'chevron-left': ChevronLeft,
+  key: Key,
 };
 
 export default icons;

packages/react/src/components/Markup/elements/BoldSpan.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import PlainSpan from './PlainSpan';
 import ItalicSpan from './ItalicSpan';
 import StrikeSpan from './StrikeSpan';
+import LinkSpan from './LinkSpan';
 
 const BoldSpan = ({ contents }) => (
   <strong>
@@ -16,6 +17,18 @@ const BoldSpan = ({ contents }) => (
 
         case 'ITALIC':
           return <ItalicSpan key={index} contents={content.value} />;
+        case 'LINK':
+          return (
+            <LinkSpan
+              key={index}
+              href={content.value.src.value}
+              label={
+                Array.isArray(content.value.label)
+                  ? content.value.label
+                  : [content.value.label]
+              }
+            />
+          );
 
         default:
           return null;

packages/react/src/components/Menu/Menu.js

@@ -31,6 +31,7 @@ const Menu = ({
   className = '',
   style = {},
   anchor = 'right bottom',
+  isToolTip = true,
 }) => {
   const theme = useTheme();
   const shadowCss = css`
@@ -84,10 +85,14 @@ const Menu = ({
       className={appendClassNames('ec-menu-wrapper', wrapperClasses)}
       style={wrapperStyles}
     >
-      <Tooltip text="Options" position="bottom">
-        {' '}
+      {isToolTip ? (
+        <Tooltip text="Options" position="bottom">
+          {' '}
+          <ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
+        </Tooltip>
+      ) : (
         <ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
-      </Tooltip>
+      )}
       {isOpen ? (
         <Box
           css={[MenuCss, shadowCss]}

packages/react/src/components/MessageGenericPreview/MessageGenericPreview.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreview = (props, className = '', style = {}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreview'
+  );
+  const messageGenericPreviewStyles = css`
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #eff0f1;
+  `;
+  return (
+    <div
+      css={messageGenericPreviewStyles}
+      className={`ec-message-generic-preview ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    />
+  );
+};
+
+export default MessageGenericPreview;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewContent.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewContent = ({
+  className = '',
+  style = {},
+  thumb,
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewContent'
+  );
+
+  const MessageGenericPreviewContentCss = css`
+    display: flex;
+    flex-direction: row;
+  `;
+
+  return (
+    <div
+      css={MessageGenericPreviewContentCss}
+      className={`ec-message-generic-preview__content ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+    >
+      {thumb}
+      <div className="ec-message-generic-preview__content-wrapper" {...props} />
+    </div>
+  );
+};
+
+export default MessageGenericPreviewContent;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewCoverImage.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewCoverImage = ({
+  className = '',
+  style = {},
+  url,
+  width,
+  height,
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewCoverImage'
+  );
+
+  const previewCoverImageCss = css`
+    background-image: url(${url});
+    max-width: 100%;
+  `;
+
+  return (
+    <div
+      css={previewCoverImageCss}
+      className={`ec-message-generic-preview__preview ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      <div style={{ paddingTop: `${(height / width) * 100}%` }} />
+    </div>
+  );
+};
+
+export default MessageGenericPreviewCoverImage;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewDescription.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewDescription = ({
+  children,
+  clamp = false,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewDescription'
+  );
+
+  return (
+    <div
+      className={`ec-message-generic-preview__description ${
+        clamp ? 'ec-message-generic-preview__description--clamp' : ''
+      } ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MessageGenericPreviewDescription;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewFooter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewFooter = ({
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewFooter'
+  );
+  const MessageGenericPreviewFooterCss = css`
+    padding: 0.5rem 0;
+  `;
+
+  return (
+    <div
+      css={MessageGenericPreviewFooterCss}
+      className={`ec-message-generic-preview__footer ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MessageGenericPreviewFooter;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewThumb.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewThumb = (className = '', style = {}, ...props) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewThumb'
+  );
+  return (
+    <div
+      className={`ec-message-generic-preview__thumb ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    />
+  );
+};
+
+export default MessageGenericPreviewThumb;

packages/react/src/components/MessageGenericPreview/MessageGenericPreviewTitle.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewTitle = ({
+  externalUrl,
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewTitle'
+  );
+
+  if (externalUrl) {
+    return (
+      <a
+        className={`ec-message-generic-preview__title ${className} ${classNames}`}
+        style={{ ...style, ...styleOverrides }}
+        href={externalUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <span
+      className={`ec-message-generic-preview__title ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default MessageGenericPreviewTitle;

packages/react/src/components/MessageGenericPreview/index.js

@@ -0,0 +1,7 @@
+export { default as MessageGenericPreview } from './MessageGenericPreview';
+export { default as MessageGenericPreviewCoverImage } from './MessageGenericPreviewCoverImage';
+export { default as MessageGenericPreviewThumb } from './MessageGenericPreviewThumb';
+export { default as MessageGenericPreviewTitle } from './MessageGenericPreviewTitle';
+export { default as MessageGenericPreviewContent } from './MessageGenericPreviewContent';
+export { default as MessageGenericPreviewDescription } from './MessageGenericPreviewDescription';
+export { default as MessageGenericPreviewFooter } from './MessageGenericPreviewFooter';