@tencentcloud/chat-uikit-react 2.2.7 → 2.2.9

package/src/components/ConversationSearch/ConversationSearch.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { ConversationSearchInput as DefaultConversationSearchInput, type IConversationSearchInputProps } from './ConversationSearchInput/ConversationSearchInput';
+import { ConversationSearchResult as DefaultConversationSearchResult, type IConversationSearchResultProps } from './ConversationSearchResult/ConversationSearchResult';
+import { ConversationPreview as DefaultResultPreview, type IConversationPreviewProps } from '../ConversationPreview';
+import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
+
+import './ConversationSearch.scss';
+
+export interface IConversationSearchProps {
+  /** The list of conversations to be searched. */
+  conversationList: IConversationModel[];
+  /** Specifies a react component to customize the avatar in the search results. */
+  Avatar?: React.ComponentType<AvatarProps>;
+  /** Specifies a react component to customize the preview of search results. */
+  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
+  /** Specifies a react component to customize the search input. */
+  ConversationSearchInput?: React.ComponentType<IConversationSearchInputProps>;
+  /** Specifies a react component to customize the search result. */
+  ConversationSearchResult?: React.ComponentType<IConversationSearchResultProps>;
+  /** Specifies a function to customize the search algorithm. This function takes the search value and the conversation list as parameters and returns the search results. */
+  searchFn?: (searchValue: string, conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies a function to be called when the search input changes. This function takes the current search value as a parameter. */
+  onSearchChange?: (searchValue: string) => void;
+  /** Specifies a function to be called when the search input is focused. */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /** Specifies a function to be called when the search input is blurred. */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /** Specifies a function to be called when a search result is selected. This function takes the selected conversation as a parameter. */
+  onSelectResult?: (conversation: IConversationModel) => void;
+  /** Specifies whether the search component is visible. */
+  visible?: boolean;
+  /** Specifies a custom class name for the search component. */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+export function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
+  if (!searchValue || conversationList?.length === 0) return [];
+  return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
+}
+
+export function ConversationSearch(props: IConversationSearchProps) {
+  const {
+    visible = true,
+    conversationList,
+    Avatar = DefaultAvatar,
+    searchFn = defaultSearchFn,
+    ResultPreview = DefaultResultPreview,
+    ConversationSearchInput = DefaultConversationSearchInput,
+    ConversationSearchResult = DefaultConversationSearchResult,
+    onSearchChange,
+    onFocus,
+    onBlur,
+    onSelectResult,
+    className,
+    style,
+  } = props;
+
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResult, setSearchResult] = useState<IConversationModel[]>(conversationList);
+
+  const [isActive, setIsActive] = useState(false);
+  const [isFocus, setIsFocus] = useState(false);
+  const [isInputEmpty, setIsInputEmpty] = useState(true);
+
+  const onFocusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocus(true);
+    onFocus?.(event);
+  };
+
+  const onBlurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocus(false);
+    onBlur?.(event);
+  };
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target?.value);
+    setIsInputEmpty(e.target?.value.length === 0);
+    onSearchChange?.(e.target?.value);
+  };
+
+  useEffect(() => {
+    onSearchChange?.(searchValue);
+  }, [searchValue, onSearchChange]);
+
+  useEffect(() => {
+    setSearchResult(searchFn(searchValue, conversationList));
+  }, [conversationList, searchFn, searchValue]);
+
+  useEffect(() => {
+    setIsActive(!isInputEmpty);
+  }, [isFocus, isInputEmpty]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames('uikit-conversation-search', className, {
+        'uikit-conversation-search--active': isActive,
+      })}
+      style={style}
+    >
+      <ConversationSearchInput
+        value={searchValue}
+        clearable={true}
+        onChange={onChangeHandler}
+        onFocus={onFocusHandler}
+        onBlur={onBlurHandler}
+      />
+      <ConversationSearchResult
+        visible={isActive}
+        Avatar={Avatar}
+        searchResult={searchResult}
+        searchValue={searchValue}
+        ResultPreview={ResultPreview}
+        onSelectResult={onSelectResult}
+      />
+    </div>
+  );
+}

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.scss

@@ -0,0 +1,13 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-conversation-search-input {
+  height: 36px;
+  align-self: stretch;
+  margin: 10px;
+  box-sizing: border-box;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.tsx

@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import { Icon, IconTypes } from '../../Icon';
+import { Input, InputProps } from '../../Input';
+import classNames from 'classnames';
+
+import './ConversationSearchInput.scss';
+
+type IConversationSearchInputProps = InputProps;
+
+function ConversationSearchInput(props: IConversationSearchInputProps) {
+  const {
+    className,
+    placeholder,
+    clearable,
+    value,
+    onChange,
+    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
+    onFocus,
+    onBlur,
+  } = props;
+  const { t } = useTranslation();
+  return (
+    <Input
+      className={classNames(
+        'uikit-conversation-search-input',
+        className,
+      )}
+      placeholder={placeholder || t('TUIConversation.Search')}
+      clearable={clearable}
+      value={value}
+      onChange={onChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      prefix={prefix}
+    />
+  );
+}
+
+export {
+  ConversationSearchInput,
+  IConversationSearchInputProps,
+};

package/src/components/ConversationSearch/ConversationSearchInput/index.ts

@@ -0,0 +1 @@
+export * from './ConversationSearchInput';

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.scss

@@ -0,0 +1,15 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-conversation-search-result {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: auto;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cs from 'classnames';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { ConversationPreview as DefaultConversationPreview, IConversationPreviewProps } from '../../ConversationPreview';
+import { Avatar as DefaultAvatar, AvatarProps } from '../../Avatar';
+import { PlaceHolder, PlaceHolderTypes } from '../../PlaceHolder';
+
+import './ConversationSearchResult.scss';
+
+interface IConversationSearchResultProps {
+  /** Whether to show the search result */
+  visible?: boolean;
+  /** The search result */
+  searchResult?: IConversationModel[];
+  /** The search input value */
+  searchValue?: string;
+  /** The custom ResultPreview component */
+  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
+  /** The custom Avatar component */
+  Avatar?: React.ComponentType<AvatarProps>;
+  /** The custom no result Placeholder component */
+  PlaceholderNoResult?: React.ReactNode;
+  /**  Callback when the ResultPreview is clicked */
+  onSelectResult?: (conversation: IConversationModel) => void;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+function ConversationSearchResult(props: IConversationSearchResultProps) {
+  const {
+    visible = false,
+    searchResult,
+    searchValue,
+    Avatar = DefaultAvatar,
+    ResultPreview = DefaultConversationPreview,
+    PlaceholderNoResult = <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />,
+    onSelectResult,
+    className,
+    style,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cs('uikit-conversation-search-result', className)}
+      style={style}
+    >
+      {searchResult?.length === 0
+        ? PlaceholderNoResult
+        : (searchResult?.map(item => (
+            <ResultPreview
+              key={item.conversationID}
+              conversation={item}
+              Avatar={Avatar}
+              highlightMatchString={searchValue}
+              onSelectConversation={onSelectResult}
+            />
+          ))
+          )}
+    </div>
+  );
+}
+
+export {
+  ConversationSearchResult,
+  IConversationSearchResultProps,
+};

package/src/components/ConversationSearch/ConversationSearchResult/index.ts

@@ -0,0 +1 @@
+export * from './ConversationSearchResult';

package/src/components/ConversationSearch/index.ts

@@ -1,2 +1,3 @@
-export * from './ConversationSearchInput';
-export * from './ConversationSearchResult';
+export * from './ConversationSearchInput/ConversationSearchInput';
+export * from './ConversationSearchResult/ConversationSearchResult';
+export * from './ConversationSearch';

package/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -1,12 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 
-export interface EmptyStateIndicatorProps{
+export interface EmptyStateIndicatorProps {
   /** List Type: conversation | message */
   listType?: 'conversation' | 'message' | 'chat';
 }
 
-function UnMemoizedEmptyStateIndicator
-<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>) {
+function UnMemoizedEmptyStateIndicator<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>) {
   const { listType } = props;
 
   if (listType === 'conversation') { return <p role="listitem">You have no conversation currently</p>; }

package/src/components/Icon/Icon.tsx

@@ -3,18 +3,18 @@ import './styles/index.scss';
 import { IconTypes } from './type';
 import { ICON_CONFIG } from './config';
 
-const changeTypeToIconComponent = (type:IconTypes) => {
+const changeTypeToIconComponent = (type: IconTypes) => {
   const src = ICON_CONFIG[type].url || '';
-  return <img className={`icon-image icon-image-${type}`} src={src} alt={type} />;
+  return src && <img className={`icon-image icon-image-${type}`} src={src} alt={type} />;
 };
-export const changeTypeToIconClassName = (type:IconTypes) => ICON_CONFIG[type]?.className || '';
+export const changeTypeToIconClassName = (type: IconTypes) => ICON_CONFIG[type]?.className || '';
 
 export interface IconProps {
-  type?: IconTypes,
-  height?: number,
-  width?: number,
-  onClick?: (event: React.BaseSyntheticEvent) => void,
-  className?: string
+  type?: IconTypes;
+  height?: number;
+  width?: number;
+  onClick?: (event: React.BaseSyntheticEvent) => void;
+  className?: string;
 }
 export function Icon(props: React.PropsWithChildren<IconProps>) {
   const {

package/src/components/Icon/config.ts

@@ -41,6 +41,7 @@ import IconVectorUrl from './images/vector.png';
 import IconUnvectorUrl from './images/unvector.png';
 import IconVoiceUrl from './images/voice.png';
 import IconAddCircleUrl from './images/add-friend.svg';
+import IconMuteUrl from './images/mute.svg';
 import IconVideoCallUrl from './images/video-call.svg';
 import IconVoiceCallUrl from './images/voice-call.svg';
 
@@ -232,6 +233,14 @@ export const ICON_CONFIG: IconConfig = {
     url: IconAddCircleUrl,
     className: 'tui-kit-icon-add-friend',
   },
+  [IconTypes.LOADING]: {
+    url: '',
+    className: 'tui-kit-icon-loading',
+  },
+  [IconTypes.MUTE]: {
+    url: IconMuteUrl,
+    className: 'tui-kit-icon-mute',
+  },
   [IconTypes.VIDEOCALL]: {
     url: IconVideoCallUrl,
     className: 'tui-kit-icon-video-call',

package/src/components/Icon/images/mute.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M4.13744611,6.61713753 L20.551,23 L0,23 L0,21 L3,21 L3,11 C3,9.40883362 3.41291862,7.91410954 4.13744611,6.61713753 Z M21.481,21 L24,21 L24,23 L23.485,23 L21.481,21 Z M12,2 C16.9705627,2 21,6.02943725 21,11 L21,20.52 L5.36684476,4.91705738 C7.01203082,3.12402075 9.37475086,2 12,2 Z" fill="#CCC" transform="translate(4 3)"/>
+    <path fill="#CCC" fill-rule="nonzero" d="M13 0L13 4 11 4 11 0z" transform="translate(4 3)"/>
+    <path stroke="#CCC" d="M8.5 24.5H15.5V25.5H8.5z" transform="translate(4 3)"/>
+    <path stroke="#CCC" stroke-width="2" transform="matrix(-1 0 0 1 31.089472 3)" d="M25.4499982 0.1546001L1.63947409 23.8855564"/>
+  </g>
+</svg>

package/src/components/Icon/styles/index.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 $primary-color: royalblue;
 
 .tui-kit-icon {
@@ -6,25 +8,58 @@ $primary-color: royalblue;
   align-items: center;
   cursor: pointer;
   position: relative;
+  user-select: none;
+
   .icon-image {
     width: 100%;
   }
-  &:hover{
+
+  &:hover {
     color: $primary-color;
-    border-color: currentColor;
+    border-color: currentcolor;
   }
-  &::after{
-    content: '';
+
+  &::after {
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     opacity: 0;
     box-shadow: 0 0 0 6px $primary-color;
-    transition: .3s;
+    transition: 0.3s;
   }
-  &:active::after{
+
+  &:active::after {
     box-shadow: none;
     opacity: 0.4;
     transition: 0s;
   }
 }
+
+.tui-kit-icon-loading {
+  cursor: wait;
+  border-radius: 100%;
+  animation: circle infinite 1s linear;
+
+  @include theme() {
+    border: 3px solid get(text-color-disable);
+    border-top-color: transparent;
+  }
+
+  &:hover {
+    @include theme() {
+      border: 3px solid get(text-color-disable);
+      border-top-color: transparent;
+    }
+  }
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Icon/type.ts

@@ -43,6 +43,8 @@ export enum IconTypes {
   UNVECTOR = 'unvector',
   VOICE = 'voice',
   ADDFRIEND = 'addFriend',
+  LOADING = 'loading',
+  MUTE = 'mute',
   VIDEOCALL = 'videoCall',
   VOICECALL = 'voiceCall',
 }

package/src/components/Input/Input.tsx

@@ -5,20 +5,21 @@ import React, {
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 
-export interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'>
-{
-  className?: string,
-  customClassName?: string,
-  placeholder?: string,
-  clearable?: boolean,
-  prefix?: React.ReactNode,
-  suffix?: React.ReactNode,
-  value?: InputHTMLAttributes<HTMLInputElement>['value'],
-  border?: '' | 'bottom',
-  disabled?: boolean,
-  maxLength?: number,
-  onKeyDown?: (options?: object) => void
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+  className?: string;
+  inputClassName?: string;
+  placeholder?: string;
+  clearable?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  value?: InputHTMLAttributes<HTMLInputElement>['value'];
+  border?: '' | 'bottom';
+  disabled?: boolean;
+  maxLength?: number;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 export interface InputRef {
   focus: (options?: object) => void;
@@ -28,8 +29,8 @@ export interface InputRef {
 export const Input = React.forwardRef<InputRef, InputProps>(
   (props: InputProps, ref): React.ReactElement => {
     const {
-      className = "",
-      customClassName = "",
+      className = '',
+      inputClassName = '',
       placeholder,
       clearable = false,
       prefix,
@@ -38,14 +39,14 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       onBlur,
       onFocus,
       onKeyDown,
-      value: propsValue = "",
-      border = "",
+      value: propsValue = '',
+      border = '',
       disabled = false,
       maxLength = undefined,
     } = props;
 
     const [focused, setFocused] = useState<boolean>(false);
-    const enterCodeList = ["Enter", "NumpadEnter"];
+    const enterCodeList = ['Enter', 'NumpadEnter'];
     const [value, setValue] = useState(propsValue);
     const inputRef = useRef<HTMLInputElement>(null);
     const handleFocus = (e: any) => {
@@ -66,7 +67,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       setValue('');
       focus();
       const currentTarget = inputRef?.current?.cloneNode(
-        true
+        true,
       ) as HTMLInputElement;
       const event = Object.create(e, {
         target: { value: currentTarget },
@@ -103,7 +104,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           <input
             maxLength={maxLength}
             disabled={disabled}
-            className={`tui-kit-input ${customClassName}`}
+            className={`tui-kit-input ${inputClassName}`}
             placeholder={placeholder}
             ref={inputRef}
             value={value}
@@ -114,9 +115,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           />
           {suffix}
           {(clearable && value)
-          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => {clearInput(e)}} />}
+          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => { clearInput(e); }} />}
         </div>
       </div>
     );
-  }
+  },
 );

package/src/components/{TUIMessage/TUIMessage.tsx → MessageElement/Message.tsx}

@@ -3,50 +3,50 @@ import { Message } from '@tencentcloud/chat';
 
 import { UnknowPorps, useComponentContext, useTUIChatStateContext } from '../../context';
 
-import { messageShowType, TUIMessageContextProvider } from '../../context/TUIMessageContext';
+import { messageShowType, TUIMessageContextProvider } from '../../context/MessageContext';
 import { useMessageHandler } from './hooks';
 
 import './styles/index.scss';
-import { TUIMessageDefault } from './TUIMessageDefault';
+import { TUIMessageDefault } from './MessageDefault';
 import { MessagePlugins as MessagePluginsDefault, MessagePluginsProps } from './MessagePlugins';
 import { MessageContext as MessageContextDefault } from './MessageContext';
 
 interface TUIMessageBasicProps {
-  className?: string,
-  filter?: (data:Message) => void,
-  isShowTime?: boolean,
-  isShowRead?: boolean,
-  plugin?: MessagePluginsProps,
-  prefix?: React.ReactElement | string,
-  suffix?: React.ReactElement | string,
-  customName?: React.ReactElement,
-  showAvatar?: messageShowType,
-  showName?: messageShowType,
-  customAvatar?: React.ReactElement,
-  isShowProgress?: boolean,
-  Progress?: React.ComponentType<{message: Message}>,
+  className?: string;
+  filter?: (data: Message) => void;
+  isShowTime?: boolean;
+  isShowRead?: boolean;
+  plugin?: MessagePluginsProps;
+  prefix?: React.ReactElement | string;
+  suffix?: React.ReactElement | string;
+  customName?: React.ReactElement;
+  showAvatar?: messageShowType;
+  showName?: messageShowType;
+  customAvatar?: React.ReactElement;
+  isShowProgress?: boolean;
+  Progress?: React.ComponentType<{ message: Message }>;
 }
 
 export interface TUIMessageProps extends TUIMessageBasicProps {
-  message?: Message,
-  className?: string,
-  TUIMessage?: React.ComponentType,
-  MessageContext?: React.ComponentType<UnknowPorps>,
-  MessagePlugins?: React.ComponentType<UnknowPorps>,
-  handleDelete?: ReactEventHandler,
-  CustemElement?: React.ComponentType<{message: Message}>,
-  TextElement?: React.ComponentType<{message: Message}>,
-  ImageElement?: React.ComponentType<{message: Message}>,
-  VideoElement?: React.ComponentType<{message: Message}>,
-  AudioElement?: React.ComponentType<{message: Message}>,
-  FileElement?: React.ComponentType<{message: Message}>,
-  MergerElement?: React.ComponentType<{message: Message}>,
-  LocationElement?: React.ComponentType<{message: Message}>,
-  FaceElement?: React.ComponentType<{message: Message}>,
+  message?: Message;
+  className?: string;
+  TUIMessage?: React.ComponentType;
+  MessageContext?: React.ComponentType<UnknowPorps>;
+  MessagePlugins?: React.ComponentType<UnknowPorps>;
+  handleDelete?: ReactEventHandler;
+  CustemElement?: React.ComponentType<{ message: Message }>;
+  TextElement?: React.ComponentType<{ message: Message }>;
+  ImageElement?: React.ComponentType<{ message: Message }>;
+  VideoElement?: React.ComponentType<{ message: Message }>;
+  AudioElement?: React.ComponentType<{ message: Message }>;
+  FileElement?: React.ComponentType<{ message: Message }>;
+  MergerElement?: React.ComponentType<{ message: Message }>;
+  LocationElement?: React.ComponentType<{ message: Message }>;
+  FaceElement?: React.ComponentType<{ message: Message }>;
 }
-function TUIMessageWithContext <T extends TUIMessageProps>(
+function TUIMessageWithContext<T extends TUIMessageProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message: propsMessage,
     TUIMessage: propTUIMessage,
@@ -136,7 +136,7 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
 const MemoizedTUIMessage = React.memo(TUIMessageWithContext) as
 typeof TUIMessageWithContext;
 
-export function TUIMessage(props:TUIMessageProps):React.ReactElement {
+export function TUIMessage(props: TUIMessageProps): React.ReactElement {
   const {
     message,
   } = props;

package/src/components/{TUIMessage → MessageElement}/MessageCustom.tsx

@@ -7,7 +7,7 @@ import type { MessageContextProps } from './MessageText';
 import { useComponentContext, useTUIChatActionContext } from '../../context';
 import { useUIManager } from '../../context';
 import { CallMessage } from '@tencentcloud/call-uikit-react';
-import { startCall } from '../TUIChat/utils';
+import { startCall } from '../Chat/utils';
 
 function MessageCustomWithContext<T extends MessageContextProps>(
   props: PropsWithChildren<T>,