@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/chat/message.mjs

@@ -0,0 +1,312 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import MenuItem from "@mui/material/MenuItem";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Icon } from "@iconify/react";
+import { useTheme } from "@mui/material";
+import { AuthorInfo } from "../avatars/index.mjs";
+import { PostContent, Menu } from "../posts/index.mjs";
+import { useChatContext } from "./context.mjs";
+import { useSessionContext } from "../hooks/session.mjs";
+import { useConfirm } from "../confirm.mjs";
+import Time from "./time.mjs";
+import { useChatInWallet } from "./hooks.mjs";
+const baseItemSx = {
+  px: 1.25,
+  transition: "all 120ms linear"
+};
+export function Message({ message, prevMessage, showTime = true, ...rest }) {
+  const { t } = useLocaleContext();
+  const { session, isAdmin } = useSessionContext();
+  const { confirm } = useConfirm();
+  const { activeChatId, deleteMessage, isInWallet, renderMessage } = useChatContext();
+  const { isInArcSphere } = useChatInWallet();
+  const theme = useTheme();
+  const handleDeleteMessage = async () => {
+    if (activeChatId) {
+      const proceed = await confirm({
+        title: t("deleteMessage.title"),
+        description: t("deleteMessage.desc"),
+        okButtonProps: { color: "error" },
+        dialogProps: { sx: { top: `${window.chatInWallet?.safeAreaInsetTop ?? 0}px` } }
+      });
+      if (proceed) {
+        deleteMessage(activeChatId, message.id);
+      }
+    }
+  };
+  const renderPostContent = () => {
+    return /* @__PURE__ */ jsx(Box, { className: "author-chat-item", sx: { my: 1 }, children: renderMessage ? renderMessage(message) : /* @__PURE__ */ jsx(PostContent, { content: message.content }) });
+  };
+  const menuItems = [];
+  const isSender = message.sender.did === session?.user?.did;
+  const messageDate = new Date(message.createdAt);
+  const prevMessageDate = prevMessage ? new Date(prevMessage.createdAt) : /* @__PURE__ */ new Date(0);
+  const messageInterval = messageDate.getTime() - prevMessageDate.getTime();
+  const isSameUser = message.sender.did === prevMessage?.sender?.did;
+  if (isSender || isAdmin) {
+    menuItems.push(
+      /* @__PURE__ */ jsx(MenuItem, { onClick: handleDeleteMessage, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
+    );
+  }
+  const compactMessage = messageInterval <= 6e4 && isSameUser;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      sx: {
+        ...baseItemSx,
+        position: "relative",
+        fontSize: 14,
+        borderRadius: 1,
+        "&:hover": {
+          bgcolor: "action.hover",
+          ".message-menu": {
+            display: "flex !important"
+          }
+        },
+        ".author-info-title": {
+          fontSize: 14,
+          fontWeight: 500,
+          // username 下方首条消息的 margin-top
+          "+ div": { mt: 1 }
+        },
+        ".author-chat-item": {
+          ml: compactMessage ? 6 : 0,
+          width: "90%"
+        },
+        ...{
+          ".be-editable": {
+            "& > *:last-child": {
+              mb: "0 !important"
+            }
+          }
+        },
+        ...compactMessage && {
+          ".inline-translation-badge": {
+            display: "none"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            items: menuItems,
+            className: "message-menu",
+            style: {
+              position: "absolute",
+              right: 12,
+              top: 0,
+              bottom: 0,
+              zIndex: theme.zIndex.modal,
+              alignItems: "center",
+              display: "none"
+            }
+          }
+        ),
+        !compactMessage ? /* @__PURE__ */ jsx(
+          AuthorInfo,
+          {
+            showBadge: false,
+            showProfileCard: true,
+            showDID: false,
+            user: message.sender,
+            createdAt: showTime ? message.createdAt : void 0,
+            linkToProfile: !isInWallet || isInArcSphere,
+            size: "sm",
+            style: {
+              alignItems: "flex-start"
+            },
+            children: renderPostContent()
+          }
+        ) : renderPostContent()
+      ]
+    }
+  );
+}
+export function NotificationMessage({ chat, message, prevMessage }) {
+  const { session } = useSessionContext();
+  const { t } = useLocaleContext();
+  const renderQuote = ({ title, cover }) => {
+    if ("post" in message) {
+      return /* @__PURE__ */ jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "a",
+            variant: "h6",
+            href: message.link,
+            target: "_blank",
+            style: { fontSize: 14, color: "info.main", textDecoration: "none" },
+            children: title || t("common.link")
+          }
+        ),
+        cover && // cover image
+        /* @__PURE__ */ jsx(Box, { sx: { maxWidth: 200, mt: 1 }, children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: [
+              {
+                height: 0,
+                pt: "56%",
+                overflow: "hidden",
+                borderRadius: 2,
+                backgroundImage: `url(${cover})`,
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px"
+              }
+            ]
+          }
+        ) })
+      ] });
+    }
+    return null;
+  };
+  const render = () => {
+    const baseCardSx = {
+      py: 1.5,
+      px: 2,
+      bgcolor: "grey.50",
+      width: "fit-content",
+      maxWidth: "calc(100% - 16px)",
+      wordWrap: "break-word",
+      borderRadius: 1,
+      transition: "all 120ms linear"
+    };
+    if (message.type === "post_create") {
+      return /* @__PURE__ */ jsxs(Box, { sx: { ...baseCardSx }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "tabler:news", style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 } }),
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+            /* @__PURE__ */ jsx("span", { children: t("chat.newPost") })
+          ] }),
+          /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+        ] }),
+        renderQuote(message.post)
+      ] });
+    }
+    if (message.type === "comment") {
+      return /* @__PURE__ */ jsxs(Box, { sx: { ...baseCardSx }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "tabler:message-circle-2",
+              style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+          /* @__PURE__ */ jsx("span", { children: message?.cc ? t("chat.commentedPost") : t("chat.commentedYourPost") }),
+          /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: message?.comment?.excerpt }),
+        renderQuote(message.post)
+      ] });
+    }
+    if (message.type === "reply") {
+      return /* @__PURE__ */ jsxs(Box, { sx: { ...baseCardSx }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "tabler:message-circle-2",
+              style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+          /* @__PURE__ */ jsx("span", { children: message?.cc ? t("chat.replyComment") : t("chat.replyYourComment") }),
+          /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: message.reply.excerpt }),
+        renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
+      ] });
+    }
+    if (message.type === "mentionInComment") {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            ...baseCardSx
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "tabler:message-circle-2",
+                  style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 }
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                " ",
+                t("chat.mentionInComment")
+              ] }),
+              /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: message?.comment?.excerpt?.replace(session?.user?.fullName, "") }),
+            renderQuote(message.post)
+          ]
+        }
+      );
+    }
+    if (message.type === "mentionInPost") {
+      return /* @__PURE__ */ jsxs(Box, { sx: { ...baseCardSx }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "tabler:message-circle-2",
+              style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+          /* @__PURE__ */ jsx("span", { children: t("chat.mentionInPost") }),
+          /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+        ] }),
+        renderQuote(message.post)
+      ] });
+    }
+    if (message.type === "pointUp") {
+      const { points, post, comment, eventKey = "" } = message;
+      const unit = points > 1 ? t("chat.points") : t("chat.point");
+      const event = eventKey ? `for ${eventKey.toLowerCase().replaceAll("-", " ")}: ` : ": ";
+      const tip = t("chat.pointUp", { points: `${points}`, unit, event });
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600" }, children: tip }),
+        comment && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: comment.excerpt }),
+        post && renderQuote(post)
+      ] });
+    }
+    if (message.type === "task") {
+      const titles = {
+        open: t("chat.openTask"),
+        close: t("chat.closeTask"),
+        assign: t("chat.assignTask"),
+        unassign: t("chat.unassignTask")
+      };
+      return /* @__PURE__ */ jsxs(Box, { sx: { ...baseCardSx }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { color: "primary.light" }, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "tabler:arrow-forward-up",
+              style: { verticalAlign: "middle", height: 15, width: 15, marginRight: 4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+          /* @__PURE__ */ jsx("span", { children: titles[message.subtype] }),
+          /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+        ] }),
+        renderQuote(message.post)
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Message, { message, showTime: false });
+  };
+  return /* @__PURE__ */ jsx(Box, { sx: { ...baseItemSx, py: 0.5, fontSize: 14 }, children: render() });
+}

package/dist/components/chat/participants.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
-import { User } from '../../types';
+import type { User } from '../../types';
 interface Props {
     users: User[];
     sx?: SxProps;
 }
-export default function Participants({ users, sx, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Participants({ users, sx, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/chat/participants.mjs

@@ -0,0 +1,60 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { styled } from "@mui/material/styles";
+import { Box, Button, Tooltip, ClickAwayListener, tooltipClasses } from "@mui/material";
+import { Avatars, AuthorInfo } from "../avatars/index.mjs";
+const HtmlTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, classes: { popper: className } }))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    color: "inherit",
+    backgroundColor: theme.palette.background.paper,
+    maxWidth: "initial",
+    maxHeight: 300,
+    marginLeft: -20,
+    overflowY: "auto",
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: "0 8px 24px rgba(140,149,159,0.2)"
+  }
+}));
+export default function Participants({ users, sx, ...rest }) {
+  const [open, setOpen] = useState(false);
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+  const visibleUsers = users.slice(0, 5);
+  const mergedSx = [
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      p: 0.5,
+      pr: 1,
+      border: 1,
+      borderColor: "grey.300",
+      ".MuiAvatarGroup-root": {
+        height: 24
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleTooltipClose, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    HtmlTooltip,
+    {
+      PopperProps: {
+        disablePortal: true
+      },
+      onClose: handleTooltipClose,
+      open,
+      disableFocusListener: true,
+      disableHoverListener: true,
+      disableTouchListener: true,
+      title: /* @__PURE__ */ jsx(Fragment, { children: users.map((item, i) => /* @__PURE__ */ jsx(Box, { sx: { p: 1 }, children: /* @__PURE__ */ jsx(AuthorInfo, { user: item, size: "sm" }) }, i)) }),
+      children: /* @__PURE__ */ jsxs(Button, { ...rest, sx: mergedSx, onClick: handleTooltipOpen, children: [
+        /* @__PURE__ */ jsx(Avatars, { users: visibleUsers, max: 5 }),
+        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, fontWeight: "bold", color: "grey.600" }, children: users.length })
+      ] })
+    }
+  ) }) });
+}

package/dist/components/chat/time.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface TimeShowProps {
     createdAt: string | Date;
 }

package/dist/components/chat/time.mjs

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import dayjs from "dayjs";
+import RelativeTime from "../shared/relative-time.mjs";
+const Time = ({ createdAt }) => {
+  if (!createdAt) {
+    return null;
+  }
+  const messageTime = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
+  const now = /* @__PURE__ */ new Date();
+  const diffInMilliseconds = now.getTime() - messageTime.getTime();
+  const diffInDays = diffInMilliseconds / (1e3 * 60 * 60 * 24);
+  const isWithinSevenDays = diffInDays <= 3;
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12, color: "grey.500", ml: 0.8 }, children: isWithinSevenDays ? /* @__PURE__ */ jsx(RelativeTime, { value: createdAt }) : dayjs(messageTime).format("YYYY-MM-DD HH:mm") });
+};
+export default Time;

package/dist/components/chat/types.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../../types';
+import type { User } from '../../types';
 export interface Message {
     id: string;
     content?: string;

package/dist/components/chat/unread-notification.d.ts

@@ -10,7 +10,7 @@ interface UnreadNotificationContextType {
     markChatAsRead: (chatId: string) => void;
     unreadMessageCount: number;
 }
-export declare const UnreadNotificationContext: import('react').Context<UnreadNotificationContextType>;
+export declare const UnreadNotificationContext: import("react").Context<UnreadNotificationContextType>;
 export declare const useUnreadNotification: () => UnreadNotificationContextType;
-export declare function UnreadNotificationProvider({ fetchUnreadState, children }: UnreadNotificationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnreadNotificationProvider({ fetchUnreadState, children }: UnreadNotificationProviderProps): import("react").JSX.Element;
 export {};

package/dist/components/chat/unread-notification.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, useCallback } from "react";
+import { useSessionContext } from "../hooks/index.mjs";
+import preferences from "../../preferences.mjs";
+export const UnreadNotificationContext = createContext(
+  {}
+);
+export const useUnreadNotification = () => useContext(UnreadNotificationContext);
+export function UnreadNotificationProvider({ fetchUnreadState, children }) {
+  const { session } = useSessionContext();
+  const [chatUnreadCounts, setChatUnreadCounts] = useState({});
+  const unread = useMemo(() => Object.values(chatUnreadCounts).some((x) => x > 0), [chatUnreadCounts]);
+  const unreadMessageCount = useMemo(
+    () => Object.values(chatUnreadCounts).reduce((acc, x) => acc + x, 0),
+    [chatUnreadCounts]
+  );
+  const incrementUnreadCount = useCallback((chatId, count) => {
+    setChatUnreadCounts((prev) => ({ ...prev, [chatId]: (prev[chatId] || 0) + count }));
+  }, []);
+  const markChatAsRead = useCallback((chatId) => {
+    setChatUnreadCounts((prev) => ({ ...prev, [chatId]: 0 }));
+  }, []);
+  const update = async () => {
+    const unreadState = await fetchUnreadState();
+    setChatUnreadCounts(unreadState);
+  };
+  useEffect(() => {
+    if (session.user && preferences.enableNotificationBadge && preferences.chatEnabled) {
+      update();
+    }
+  }, [session.user]);
+  const value = useMemo(
+    () => ({
+      unread,
+      chatUnreadCounts,
+      unreadMessageCount,
+      incrementUnreadCount,
+      markChatAsRead
+    }),
+    [unread, chatUnreadCounts, unreadMessageCount, incrementUnreadCount, markChatAsRead]
+  );
+  return /* @__PURE__ */ jsx(UnreadNotificationContext.Provider, { value, children });
+}

package/dist/components/chat/user-search.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface Props {
     sx?: SxProps;
     inputSx?: SxProps;
 }
-export declare function UserSearch({ sx, inputSx, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function UserSearch({ sx, inputSx, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/chat/user-search.mjs

@@ -0,0 +1,143 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Autocomplete, Backdrop, Box, InputAdornment, TextField, Typography } from "@mui/material";
+import { useState } from "react";
+import { useRequest } from "ahooks";
+import DID from "@arcblock/ux/lib/DID";
+import SearchIcon from "virtual:icons/tabler/search";
+import { useNavigate } from "react-router-dom";
+import ReactDOM from "react-dom";
+import { mergeSx } from "../utils.mjs";
+import { useChatContext } from "./context.mjs";
+import { Avatar } from "../avatars/index.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import { useChatInWallet } from "./hooks.mjs";
+export function UserSearch({ sx, inputSx, ...rest }) {
+  const { session } = useSessionContext();
+  const navigate = useNavigate();
+  const { client, isInWallet, chats, setActiveChat, createDM } = useChatContext();
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const { navigateToChat } = useChatInWallet();
+  const { data, loading } = useRequest(
+    async () => {
+      if (!open) {
+        return Promise.resolve([]);
+      }
+      const results = await client.searchUsers({ search: inputValue });
+      if (!results?.length) {
+        return [];
+      }
+      return results.filter((x) => x.did !== session?.user?.did);
+    },
+    {
+      throttleWait: 500,
+      throttleLeading: false,
+      refreshDeps: [open, inputValue, session?.user?.did]
+    }
+  );
+  const mergedSx = mergeSx({}, sx);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { sx: mergedSx, ...rest, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        open,
+        onOpen: () => setOpen(true),
+        onClose: () => {
+          setInputValue("");
+          setOpen(false);
+        },
+        disableClearable: true,
+        filterOptions: (x) => x,
+        options: data || [],
+        getOptionLabel: () => "",
+        renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.did, sx: { px: "8px!important" } }, /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { mt: 0.25, lineHeight: 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: option.did, src: option.avatar, size: 28, shape: "circle", variant: "circle" }) }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+                ml: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      fontSize: 12,
+                      fontWeight: "bold",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis"
+                    },
+                    children: option.fullName
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { sx: { ".span": { lineHeight: 1 } }, children: /* @__PURE__ */ jsx(DID, { did: option.did, copyable: false, compact: true, responsive: false, size: 12 }) })
+              ]
+            }
+          )
+        ] })),
+        onChange: async (event, newValue, reason) => {
+          if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+            return;
+          }
+          const chatId = [newValue.did, session?.user?.did].sort().join("-");
+          const chat = chats.find((x) => x.id === chatId);
+          if (isInWallet) {
+            if (chat) {
+              navigateToChat({ id: chat.id, title: newValue.fullName });
+            } else {
+              const dm = await createDM(newValue.did);
+              navigateToChat({ id: dm.id, title: newValue.fullName });
+            }
+          } else if (chat) {
+            setActiveChat(chat);
+          } else {
+            navigate(`/chat/dm/${newValue.did}`);
+          }
+        },
+        loading,
+        onInputChange: (_, newInputValue, reason) => {
+          if (reason === "reset") {
+            return;
+          }
+          setInputValue(newInputValue);
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            placeholder: "Search user",
+            variant: "outlined",
+            sx: {
+              fontSize: 12,
+              ".MuiInputBase-root": { pr: "8px!important" },
+              ".MuiInputBase-input": { py: "0!important" },
+              fieldset: { borderColor: "divider!important" }
+            },
+            slotProps: {
+              input: {
+                ...params.InputProps,
+                type: "search",
+                sx: inputSx,
+                startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box, { component: SearchIcon, sx: { fontSize: 14 } }) })
+              }
+            }
+          }
+        ),
+        isOptionEqualToValue: (option, value) => option.did === value.did,
+        sx: { ".MuiAutocomplete-endAdornment": { display: "none" } }
+      }
+    ) }),
+    ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(Backdrop, { open, sx: { zIndex: "modal", bgcolor: "transparent" } }),
+      window.document.body
+    )
+  ] });
+}

package/dist/components/check-mark.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 interface Props {
     size?: number;
     animationKey: string;
     eager?: boolean;
 }
-export default function CheckMark({ size, animationKey, eager }: Props): import("react/jsx-runtime").JSX.Element;
+export default function CheckMark({ size, animationKey, eager }: Props): import("react").JSX.Element;
 export {};