TESTNET | NEAR Transaction JBXtUPytxaV9dQuqjaRTfdMw3a5KWgGmHiGuhch6Hzf3

"Calimero.Curb.Main": {

"": "const accountId = context.accountId;\\n\\n// fixme! our VM removes the query params from the url\\n// fixme! so we need to cache them before the second render\\n// fixme! https://github.com/calimero-is-near/VM/pull/165\\nconst cachedParams = useRef(null); // todo! drop this cache when the VM is patched, if it ever is\\ncachedParams.current = { ...cachedParams.current, ...extractQueryParams() };\\nconst props = { ...props, ...cachedParams.current };\\n\\nconst initialContract = props.contract || \\\'chat-staging.ws-protocol-63\\\';\\nconsole.log(\\\'\\u{1f680} ~ initialContract:\\\', initialContract);\\nconst componentOwnerId = props.componentOwnerId || \\\'calimero.testnet\\\';\\nconsole.log(\\\'\\u{1f680} ~ componentOwnerId:\\\', componentOwnerId);\\nconst encryptionUrl =\\n props.encryptionUrl ||\\n \\\'https://cali-encryption.euw3.staging.gcp.calimero.network/key\\\';\\nconsole.log(\\\'\\u{1f680} ~ encryptionUrl:\\\', encryptionUrl);\\n\\nconst meroshipUrl =\\n props.meroshipUrl ||\\n \\\'wss://api.staging.calimero.network/api/v1/shards/ws-protocol-63-calimero-testnet/meroship/ws\\\';\\nconsole.log(\\\'\\u{1f680} ~ meroshipUrl:\\\', meroshipUrl);\\n\\nconst enableCommunities = props.enableCommunities ?? false;\\nconst onAppJoined = props.onAppJoined || (() => {});\\nconst communities = props.communities || [];\\nconst getCalimeroToken = props.getCalimeroToken || (() => {});\\nconst refresh = props.refresh || (() => {});\\nconst debug = props.debug || false;\\n\\nconst getSelectedCommunity = useCallback(() => {\\n return Storage.innerGet(\\\'community\\\').then((value) => {\\n if (!value) {\\n value = initialContract;\\n Storage.set(\\\'community\\\', value);\\n }\\n setContract(value);\\n });\\n}, [initialContract]);\\n\\nconst [contract, setContract] = useState(null);\\nconst [loggedIn, setLoggedIn] = useState(false);\\nconst [initialChat, setInitialChat] = useState(null);\\n\\nconst handleContractChange = useCallback((contract) => {\\n changeContract(contract, null);\\n}, []);\\n\\nconst updateInitialChat = useCallback((session) => {\\n Storage.set(\\\'lastSession\\\', JSON.stringify(session));\\n}, []);\\n\\nfunction changeContract(contract, session) {\\n Storage.set(\\\'community\\\', contract);\\n setContract(contract);\\n setLoggedIn(false);\\n updateInitialChat(session);\\n}\\n\\nconst getUrlSession = () => {\\n const urlDerivedChatParams = cachedParams.current;\\n let derivedSession = null;\\n if (\\n urlDerivedChatParams &&\\n urlDerivedChatParams.type &&\\n urlDerivedChatParams.target &&\\n urlDerivedChatParams.contractName\\n ) {\\n if (!communities.includes(urlDerivedChatParams.contractName)) {\\n console.log(\\\'Error unknown contract id on push notif.\\\');\\n return;\\n }\\n\\n if (urlDerivedChatParams.type === \\\'channel\\\') {\\n derivedSession = {\\n type: urlDerivedChatParams.type,\\n name: urlDerivedChatParams.target,\\n };\\n } else if (urlDerivedChatParams.type === \\\'dm\\\') {\\n derivedSession = {\\n type: \\\'direct_message\\\',\\n id: urlDerivedChatParams.target,\\n };\\n }\\n changeContract(urlDerivedChatParams.contractName, derivedSession);\\n }\\n return derivedSession;\\n};\\n\\nconst getInitialChat = useCallback(async () => {\\n const derivedSession = getUrlSession();\\n if (derivedSession) {\\n setInitialChat(derivedSession);\\n return;\\n }\\n Storage.innerGet(\\\'lastSession\\\').then((session) => {\\n setInitialChat(session ? JSON.parse(session) : null);\\n });\\n}, []);\\n\\nuseEffect(() => {\\n getSelectedCommunity();\\n getInitialChat();\\n}, []);\\n\\nif (!contract) {\\n return \\\'Loading\\\';\\n}\\n\\nconst PageContainer = styled.div`\\n height: 100%;\\n width: 100%;\\n`;\\n\\nconst loginApi = useMemo(\\n () => ({\\n join: () => {\\n Near.fakCalimeroCall(contract, \\\'join\\\');\\n },\\n login: () => {\\n Near.requestCalimeroFak(contract);\\n },\\n validateKey: () => {\\n onAppJoined(accountId);\\n return Near.hasValidCalimeroFak(contract);\\n },\\n getMembers: () => Near.asyncCalimeroView(contract, \\\'get_members\\\'),\\n }),\\n [contract],\\n);\\n\\nconst Logo = () => (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Navbar.CurbLogo`}\\n props={{\\n justify: true,\\n }}\\n />\\n);\\n\\n// Ping to prepare the new key, needs to be simplified\\nconst ping = () => Near.fakCalimeroCall(contract, \\\'ping\\\');\\n\\nconst App = (props) => (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Logger`}\\n props={{\\n debug,\\n render: ({ Logger }) => (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.EventEmitter`}\\n props={{\\n render: ({ EventEmitter }) => (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.WebSocketManager`}\\n props={{\\n deps: { Logger, EventEmitter },\\n debug,\\n accountId: props.accountId,\\n wsAddress: meroshipUrl,\\n getAuthToken: getCalimeroToken,\\n render: ({ wsApi }) => (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.AppContainer`}\\n props={{\\n ...props,\\n wsApi,\\n deps: { Logger, EventEmitter },\\n }}\\n />\\n ),\\n }}\\n />\\n ),\\n }}\\n />\\n ),\\n }}\\n />\\n);\\n\\nreturn (\\n <PageContainer>\\n {!loggedIn || !accountId ? (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Common.Login.index`}\\n props={{\\n loginApi,\\n accountId,\\n componentOwnerId,\\n onValidLogin: () => {\\n // todo! migrate to meroship\\n ping().then(() => {\\n setLoggedIn(true);\\n });\\n },\\n logo: <Logo />,\\n refresh,\\n }}\\n />\\n ) : (\\n <App\\n componentOwnerId={componentOwnerId}\\n contract={contract}\\n encryptionUrl={encryptionUrl}\\n accountId={accountId}\\n enableCommunities={enableCommunities}\\n handleContractChange={handleContractChange}\\n initialChat={initialChat}\\n updateInitialChat={updateInitialChat}\\n communities={communities}\\n />\\n )}\\n </PageContainer>\\n);\\n"

},

"Calimero.Curb.AppContainer": {

"": "// dependencies\\nconst EventEmitter = props.deps.EventEmitter;\\n\\nconst componentOwnerId = props.componentOwnerId;\\nconst contract = props.contract;\\nconst encryptionUrl = props.encryptionUrl;\\nconst accountId = props.accountId;\\nconst enableCommunities = props.enableCommunities;\\nconst wsApi = props.wsApi;\\nconst handleContractChange = props.handleContractChange;\\nconst initialChat = props.initialChat;\\nconst updateInitialChat = props.updateInitialChat;\\nconst communities = props.communities;\\nconst MAX_RETRIES = 5;\\n\\n/**\\n * Types of chats.\\n * @typedef {object} ChatTypes\\n * @property {string} CHANNEL - Designates a multi-user chat.\\n * @property {string} DIRECT_MESSAGE - Designates a one-to-one chat.\\n */\\nconst ChatTypes = {\\n CHANNEL: \\\'channel\\\',\\n DIRECT_MESSAGE: \\\'direct_message\\\',\\n};\\n\\n/**\\n * `curbApi` is a utility object containing several methods for interacting\\n * with a chat API and managing encryption in a chat application.\\n *\\n * @type {Object}\\n * @property {function} createGroup - Sends an API request to create a new chat group.\\n * @property {function} inviteUser - Invites a user to a channel.\\n * @property {function} getChannels - Retrieves all channels that a user is part of or all public channels.\\n * @property {function} getDMs - Retrieves all direct messages for the user.\\n * @property {function} getUnreadMessages - Retrieves all unread messages for the user.\\n * @property {function} getChannelMeta - Fetches metadata about a particular channel.\\n * @property {function} leaveChannel - Leaves a specified channel.\\n * @property {function} createChannel - Creates a new channel.\\n * @property {function} toggleReaction - Toggles a reaction to a message.\\n * @property {function} fetchMessages - Fetches messages from a specified chat.\\n * @property {function} fetchKey - Obtains the encryption key for a particular chat.\\n * @property {function} sendMessage - Sends a message to a user or channel.\\n *\\n * @property {function} createGroup\\n * @param {string} name - The name of the new group.\\n * @returns {Promise} - A Promise that resolves with the result of the API call.\\n *\\n * @property {function} inviteUser\\n * @param {Object} param\\n * @param {string} param.account - The account of the user to invite.\\n * @param {string} param.channel - The name of the channel to which the user is being invited.\\n * @returns {Promise} - A Promise that resolves with the result of the API call.\\n *\\n * @property {function} getChannels\\n * @param {Object} param\\n * @param {Object} param.getUserChannels - The boolean value that switches if function returns user channels or all public channels.\\n * @returns {Promise<Array>} - A Promise that resolves with an array of channels.\\n *\\n * @property {function} fetchKey\\n * @param {Object} param\\n * @param {Object} param.chat - An object containing the chat details.\\n * @returns {Promise<string>} - A Promise that resolves with the fetched key.\\n *\\n * @property {function} sendMessage\\n * @param {Object} param\\n * @param {string} param.message - The message to be sent.\\n * @param {string} [param.img] - The image to be sent (if any).\\n * @param {string} [param.toAccount] - The account to which the message is to be sent.\\n * @param {string} [param.toChannel] - The channel to which the message is to be sent.\\n * @param {string} param.key - The encryption key for the message.\\n * @param {string} [param.threadId] - The ID of the thread to which the message belongs.\\n * @throws {string} - Throws an error message if the required parameters are not valid.\\n * @returns {Promise} - A Promise that resolves with the result of the API call.\\n */\\nconst curbApi = useMemo(() => {\\n // Send transactions in order and wait for the previous transaction to be confirmed before sending the next one\\n const meroshipSend = (method, params, callback, reschedule) => {\\n transactionQueue.push({ method, params, callback, reschedule, retries: 0 });\\n processQueue();\\n };\\n\\n let transactionQueue = [];\\n let isProcessing = false;\\n\\n const processQueue = () => {\\n if (transactionQueue.length === 0 || isProcessing) {\\n return;\\n }\\n\\n isProcessing = true;\\n const { method, params, callback, reschedule, retries } =\\n transactionQueue.shift();\\n\\n Calimero.fakSignTx(contract, method, params)\\n .then(([_, signedTx]) => {\\n wsApi.methods.submitTx(\\n signedTx,\\n (err, result) => {\\n if (!err) {\\n console.log(\\n \\\'Error: Calimero.Curb.AppContainer.meroshipSend error\\\',\\n contract,\\n method,\\n params,\\n err,\\n );\\n console.log(\\\'Retry: Calimero.Curb.AppContainer.meroshipSend\\\');\\n handleRetry(method, params, callback, 5, err);\\n } else {\\n console.log(\\n \\\'Calimero.Curb.AppContainer.meroshipSend result\\\',\\n result,\\n );\\n callback?.(null, result);\\n }\\n isProcessing = false;\\n processQueue();\\n },\\n reschedule,\\n );\\n })\\n .catch((error) => {\\n console.error(\\\'Error in signing transaction:\\\', error);\\n handleRetry(method, params, callback, retries, error);\\n });\\n };\\n\\n const handleRetry = (method, params, callback, retries, error) => {\\n if (retries < MAX_RETRIES) {\\n transactionQueue.unshift({\\n method,\\n params,\\n callback,\\n retries: retries + 1,\\n });\\n } else {\\n console.error(\\\'Max retries reached:\\\', error);\\n callback?.(error);\\n }\\n isProcessing = false;\\n processQueue();\\n };\\n\\n const getStorageKey = (chatType, id) => `${contract}:${id}:${chatType}`;\\n const fetchKey = ({ chat }) => {\\n return new Promise((resolve, reject) => {\\n if (!chat || !chat.type) {\\n return reject(\\n \\\'Error: Invalid chat object, you need to provide a valid chat object to fetch the key\\\',\\n );\\n }\\n const storageKey = getStorageKey(\\n chat.type,\\n chat.type === ChatTypes.CHANNEL ? chat.name : chat.id,\\n );\\n const storedEncriptionKey = Storage.privateGet(storageKey);\\n if (storedEncriptionKey) {\\n return resolve(storedEncriptionKey);\\n }\\n const nonce = toHexString(Crypto.randomBytes(16));\\n Calimero.sign(contract, Buffer.from(accountId + \\\'|\\\' + nonce))\\n .then((signature) => {\\n const keyBody = {\\n from: accountId,\\n contract,\\n };\\n if (chat.type === ChatTypes.DIRECT_MESSAGE) {\\n keyBody.dms = [chat.id];\\n } else {\\n keyBody.channels = [{ name: chat.name }];\\n }\\n keyBody.nonce = nonce;\\n keyBody.signature = toHexString(signature.signature);\\n\\n return asyncFetch(encryptionUrl, {\\n method: \\\'POST\\\',\\n headers: {\\n Accept: \\\'application/json\\\',\\n \\\'Content-Type\\\': \\\'application/json\\\',\\n },\\n body: JSON.stringify(keyBody),\\n }).catch((e) => {\\n return Promise.reject(e);\\n });\\n })\\n .then((keyData) => {\\n for (const [id, key] of Object.entries(keyData.body.dms)) {\\n const storageKey = getStorageKey(ChatTypes.DIRECT_MESSAGE, id);\\n Storage.privateSet(storageKey, key);\\n }\\n for (const [id, key] of Object.entries(keyData.body.channels)) {\\n const storageKey = getStorageKey(ChatTypes.CHANNEL, id);\\n Storage.privateSet(storageKey, key);\\n }\\n resolve(Storage.privateGet(storageKey));\\n })\\n .catch((e) => {\\n console.log(\\\'Error: Calimero.Curb.AppContainer.fetchKey error\\\', e);\\n reject(e);\\n });\\n });\\n };\\n\\n function extractAndAddMentions(inputText) {\\n const regexPattern =\\n /(@everyone)|(@here)|(@[a-zA-Z0-9_.-]+(?<![-.0-9])(?:\\\\.testnet|\\\\.near))/g;\\n const uniqueMentions = new Set();\\n let match;\\n while ((match = regexPattern.exec(inputText)) !== null) {\\n uniqueMentions.add(match[0].slice(1, match[0].length));\\n }\\n return Array.from(uniqueMentions);\\n }\\n\\n const sendMessage = (\\n { message, images, chat, files, threadId },\\n callback,\\n ) => {\\n if (!message && images?.length === 0 && files?.length === 0) {\\n // Nothing to send\\n return;\\n }\\n if (!chat) {\\n throw \\\'You need to provide a chat object to send the message\\\';\\n }\\n return fetchKey({ chat }).then((key) => {\\n const params = {};\\n return encrypt(message, images ?? [], files ?? [], key).then(\\n (encrypted) => {\\n const mentionsArray = extractAndAddMentions(message);\\n if (chat.type === ChatTypes.DIRECT_MESSAGE) {\\n params.account = chat.id;\\n } else {\\n params.group = { name: chat.name };\\n }\\n if (mentionsArray.length) {\\n params.mentions = mentionsArray;\\n }\\n if (encrypted.images.length > 0) {\\n params.images = encrypted.images;\\n } else if (encrypted.files.length > 0) {\\n params.files = encrypted.files;\\n }\\n params.message = encrypted.text;\\n params.nonce = encrypted.nonce;\\n params.timestamp = Date.now();\\n params.parent_message = threadId ?? undefined;\\n try {\\n meroshipSend(\\\'send_message\\\', params, callback, (retry) =>\\n chat.type === ChatTypes.CHANNEL\\n ? curbApi.once(\\n \\\'subscribed\\\',\\n (name) => name === chat.name && retry(),\\n )\\n : retry(),\\n );\\n } catch (e) {\\n return Promise.reject(e);\\n }\\n },\\n );\\n });\\n };\\n const parseHexString = (hexString) => {\\n const result = [];\\n while (hexString.length >= 2) {\\n result.push(parseInt(hexString.substring(0, 2), 16));\\n hexString = hexString.substring(2, hexString.length);\\n }\\n return result;\\n };\\n\\n const deleteMessage = ({ message, chat, callback }) => {\\n const params = {\\n message_id: message.id,\\n };\\n if (chat.type === ChatTypes.DIRECT_MESSAGE) {\\n params.account = chat.id;\\n } else {\\n params.group = { name: chat.name };\\n }\\n if (message.parent_message) {\\n params.parent_message = message.parent_message;\\n }\\n try {\\n meroshipSend(\\\'delete_message\\\', params, callback, (retry) =>\\n chat.type === ChatTypes.CHANNEL\\n ? curbApi.once(\\\'subscribed\\\', (name) => name === chat.name && retry())\\n : retry(),\\n );\\n } catch (e) {\\n return Promise.reject(e);\\n }\\n };\\n\\n const toHexString = (byteArray) => {\\n let result = \\\'\\\';\\n for (let byte of byteArray) {\\n result += (\\\'0\\\' + (byte & 0xff).toString(16)).slice(-2);\\n }\\n return result;\\n };\\n\\n const encryptWithCipher = (data, key, nonce) => {\\n const cipher = Crypto.createCipheriv(\\n \\\'aes-256-cbc\\\',\\n parseHexString(key),\\n nonce,\\n );\\n let encryptedData = cipher.update(data, \\\'utf8\\\', \\\'base64\\\');\\n encryptedData += cipher.final(\\\'base64\\\');\\n return encryptedData;\\n };\\n\\n const encryptFileWithCipher = async (fileBuffer, key, nonce, name) => {\\n const cipher = Crypto.createCipheriv(\\n \\\'aes-256-cbc\\\',\\n Buffer.from(key, \\\'hex\\\'),\\n Buffer.from(nonce, \\\'hex\\\'),\\n );\\n try {\\n const encryptedData = Buffer.concat([\\n cipher.update(fileBuffer),\\n cipher.final(),\\n ]);\\n return { encryptedData: encryptedData, name: name };\\n } catch (error) {\\n console.log(\\\'Error reading or encrypting the file: \\\' + error);\\n return {};\\n }\\n };\\n\\n const encrypted_prefix = \\\'encrypted_\\\';\\n\\n const encrypt = (text, images, files, key, prevNonce) => {\\n let nonce;\\n if (prevNonce) {\\n nonce = [];\\n let hexString = prevNonce;\\n while (hexString.length >= 2) {\\n nonce.push(parseInt(hexString.substring(0, 2), 16));\\n hexString = hexString.substring(2, hexString.length);\\n }\\n } else {\\n nonce = Crypto.randomBytes(16);\\n }\\n\\n // console.log(\\\'images xx\\\', images);\\n // console.log(\\\'files xx\\\', files);\\n\\n const hexNonce = toHexString(nonce);\\n // console.log(\\\'prev\\\', text, key, nonce, encrypted);\\n let encryptedText = encryptWithCipher(text, key, nonce);\\n // console.log(\\\'encrypt\\\', text, key, nonce, encryptedText);\\n let encryptedImages = [];\\n let encryptedFiles = [];\\n if (images.length > 0) {\\n encryptedImages = Promise.all(\\n images.map((image) => {\\n return image.content.arrayBuffer().then((fileBuffer) => {\\n const result = encryptFileWithCipher(\\n Buffer.from(fileBuffer),\\n key,\\n hexNonce,\\n image.content.name,\\n );\\n\\n let uploadedCid = \\\'\\\';\\n const blob = new Blob([result.encryptedData], {\\n type: image.content.type,\\n });\\n return asyncFetch(\\\'https://ipfs.near.social/add\\\', {\\n method: \\\'POST\\\',\\n body: blob,\\n }).then((res) => {\\n if (res.status === 500) {\\n console.log(\\\'error while uploading, max size\\\', res);\\n return null;\\n } else {\\n uploadedCid = res.body.cid;\\n }\\n const encryptedCid = encryptWithCipher(uploadedCid, key, nonce);\\n const encryptedName = encryptWithCipher(result.name, key, nonce);\\n return {\\n name: encryptedName,\\n ipfs_cid: encrypted_prefix + encryptedCid,\\n };\\n });\\n });\\n }),\\n );\\n } else if (files.length > 0) {\\n // TODO: handle multiple files and images\\n encryptedFiles = Promise.all(\\n files.map((file) => {\\n return file.content.arrayBuffer().then((fileBuffer) => {\\n const result = encryptFileWithCipher(\\n Buffer.from(fileBuffer),\\n key,\\n hexNonce,\\n file.content.name,\\n );\\n let uploadedCid = \\\'\\\';\\n const blob = new Blob([result.encryptedData], {\\n type: file.content.type,\\n });\\n //Upload encrypted files to ipfs\\n return asyncFetch(\\\'https://ipfs.near.social/add\\\', {\\n method: \\\'POST\\\',\\n body: blob,\\n }).then((res) => {\\n if (res.status === 500) {\\n console.log(\\\'error while uploading\\\', res);\\n return null;\\n } else {\\n uploadedCid = res.body.cid;\\n }\\n const encryptedCid = encryptWithCipher(uploadedCid, key, nonce);\\n const encryptedName = encryptWithCipher(result.name, key, nonce);\\n return {\\n name: encryptedName,\\n ipfs_cid: encrypted_prefix + encryptedCid,\\n };\\n });\\n });\\n }),\\n );\\n }\\n return Promise.all([encryptedImages, encryptedFiles]).then(\\n (attachements) => {\\n return {\\n text: encryptedText,\\n images: attachements[0],\\n files: attachements[1],\\n nonce: hexNonce,\\n };\\n },\\n );\\n };\\n\\n function parseCid(encryptedCid, key, nonce) {\\n if (encryptedCid.startsWith(encrypted_prefix)) {\\n const cid = encryptedCid.slice(encrypted_prefix.length);\\n return encrypted_prefix + decrypt(cid, key, nonce);\\n } else {\\n return decrypt(encryptedCid, key, nonce);\\n }\\n }\\n\\n function decryptMessages(messages, key) {\\n if (!key || key.length === 0) {\\n return [];\\n }\\n const decryptedMessages = messages.map((msg) => {\\n return {\\n ...msg,\\n key: key,\\n text: msg.text ? decrypt(msg.text, key, msg.nonce) : \\\'\\\',\\n files:\\n msg.files?.length > 0\\n ? [\\n {\\n name: decrypt(msg.files[0].name, key, msg.nonce),\\n ipfs_cid: parseCid(msg.files[0].ipfs_cid, key, msg.nonce),\\n },\\n ]\\n : [],\\n images:\\n msg.images?.length > 0\\n ? [\\n {\\n name: decrypt(msg.images[0].name, key, msg.nonce),\\n ipfs_cid: parseCid(msg.images[0].ipfs_cid, key, msg.nonce),\\n },\\n ]\\n : [],\\n reactions: msg.reactions ?? [],\\n };\\n });\\n return decryptedMessages;\\n }\\n function decrypt(text, key, nonce) {\\n if (!key) {\\n return null;\\n }\\n const byteNonce = [];\\n let hexString = nonce;\\n while (hexString.length >= 2) {\\n byteNonce.push(parseInt(hexString.substring(0, 2), 16));\\n hexString = hexString.substring(2, hexString.length);\\n }\\n\\n try {\\n const decipher = Crypto.createDecipheriv(\\n \\\'aes-256-cbc\\\',\\n parseHexString(key),\\n byteNonce,\\n );\\n let decrypted = decipher.update(text, \\\'base64\\\', \\\'utf8\\\');\\n decrypted += decipher.final(\\\'utf8\\\');\\n return decrypted;\\n } catch (e) {\\n console.log(\\\'Calimero.decrypt error: \\\', e.toString());\\n return null;\\n }\\n }\\n\\n let appEvents = new EventEmitter();\\n\\n return {\\n utils: { toHexString, parseHexString },\\n decryptMessages,\\n fetchKey,\\n on: (event, listener) => {\\n appEvents.on(event, listener);\\n return curbApi;\\n },\\n once: (event, listener) => {\\n appEvents.once(event, listener);\\n return curbApi;\\n },\\n off: (event, listener) => {\\n appEvents.off(event, listener);\\n return curbApi;\\n },\\n prependListener: (event, listener) => {\\n appEvents.prependListener(event, listener);\\n return curbApi;\\n },\\n prependOnceListener: (event, listener) => {\\n appEvents.prependOnceListener(event, listener);\\n return curbApi;\\n },\\n emit: (event, data) => {\\n appEvents.emit(event, data);\\n return curbApi;\\n },\\n createGroup: (name, isPrivate, isReadOnly) =>\\n Near.fakCalimeroCall(contract, \\\'create_group\\\', {\\n group: { name },\\n channel_type: isPrivate ? \\\'Private\\\' : \\\'Public\\\',\\n read_only: isReadOnly,\\n creator: accountId,\\n }),\\n inviteUser: ({ account, channel }) =>\\n Near.fakCalimeroCall(contract, \\\'group_invite\\\', {\\n group: { name: channel },\\n account,\\n }),\\n joinChannel: (channel) =>\\n Near.fakCalimeroCall(contract, \\\'group_invite\\\', {\\n group: { name: channel },\\n account: accountId,\\n self_join: true,\\n }),\\n getChannels: (getUserChannels) => {\\n const params = getUserChannels ? { account: accountId } : {};\\n return Near.asyncCalimeroView(contract, \\\'get_groups\\\', params).then(\\n (groups) =>\\n groups.map((group) => ({ ...group, type: ChatTypes.CHANNEL })),\\n );\\n },\\n getFilteredMembers: (namePrefix, channelName) =>\\n Near.asyncCalimeroView(contract, \\\'get_members\\\', {\\n name_prefix: namePrefix,\\n group: { name: channelName },\\n exclude: true,\\n }).then((members) =>\\n members.map((member) => ({\\n ...member,\\n type: ChatTypes.DIRECT_MESSAGE,\\n })),\\n ),\\n getDMs: () =>\\n Near.asyncCalimeroView(contract, \\\'get_direct_messages\\\', {\\n account: accountId,\\n }),\\n fetchAccounts: ({ groupName, prefix, limit, exclude }) =>\\n Near.asyncCalimeroView(contract, \\\'get_members\\\', {\\n group: groupName ? { groupName } : undefined,\\n name_prefix: prefix,\\n limit,\\n exclude,\\n }),\\n getAccountsStatus: (accounts) =>\\n new Promise((resolve, reject) => {\\n wsApi.methods.getAccountsStatus(accounts, (err, result) => {\\n if (err) {\\n reject(err);\\n return;\\n }\\n resolve(result);\\n });\\n }),\\n getAppName: () =>\\n Near.asyncCalimeroView(contract, \\\'public_info\\\').then(({ name }) => name),\\n getChannelMembers: (channelName) =>\\n Near.asyncCalimeroView(contract, \\\'get_members\\\', {\\n group: { name: channelName },\\n }),\\n getUnreadMessages: () =>\\n Near.asyncCalimeroView(contract, \\\'unread_messages\\\', {\\n account: accountId,\\n }),\\n getChannelMeta: (channelName) =>\\n Near.asyncCalimeroView(contract, \\\'channel_info\\\', {\\n group: { name: channelName },\\n }),\\n promoteModerator: (accountId, channelName, isAdd) =>\\n Near.fakCalimeroCall(contract, \\\'set_group_moderator\\\', {\\n group: { name: channelName },\\n moderator: accountId,\\n is_add: isAdd,\\n }),\\n removeUserFromChannel: (accountId, channelName) =>\\n Near.fakCalimeroCall(contract, \\\'leave_group\\\', {\\n group: { name: channelName },\\n account: accountId,\\n }),\\n leaveChannel: (channelName) =>\\n Near.fakCalimeroCall(contract, \\\'leave_group\\\', {\\n group: { name: channelName },\\n account: accountId,\\n }),\\n createChannel: (channelName) =>\\n Near.fakCalimeroCall(contract, \\\'create_group\\\', {\\n group: { channelName },\\n }),\\n toggleReaction: ({ messageId, reaction }, callback) => {\\n meroshipSend(\\n \\\'toggle_reaction\\\',\\n {\\n message_id: messageId,\\n reaction,\\n },\\n callback,\\n );\\n },\\n fetchMessages: ({ chat, beforeId, afterId, limit, parentMessageId }) =>\\n new Promise((resolve, reject) => {\\n if (!chat || !chat.type) {\\n reject(`Error: Invalid chat object ${JSON.stringify(chat)}`);\\n return;\\n }\\n let args = { limit: 1000000 };\\n if (chat.type === ChatTypes.CHANNEL && chat.name) {\\n args.group = { name: chat.name };\\n } else if (chat.type === ChatTypes.DIRECT_MESSAGE && chat.id) {\\n args.accounts = [accountId, chat.id];\\n } else {\\n reject(\\\'Error: Invalid chat object\\\');\\n return;\\n }\\n if (beforeId) {\\n args.before_id = beforeId;\\n } else if (afterId) {\\n args.after_id = afterId;\\n }\\n if (limit) {\\n args.limit = limit;\\n }\\n if (parentMessageId) {\\n args.parent_message = parentMessageId;\\n }\\n Promise.all([\\n fetchKey({ chat }),\\n Near.asyncCalimeroView(contract, \\\'get_messages\\\', args),\\n ])\\n .then(([key, messagesResponse]) => {\\n const { messages, totalCount, startPosition } = messagesResponse;\\n const result = {\\n messages: decryptMessages(messages, key),\\n totalCount,\\n hasOlder: startPosition !== 0,\\n };\\n resolve(result);\\n })\\n .catch((e) => {\\n console.log(\\\'Error: Calimero.Curb.Chat.fetchMessages error\\\', e);\\n reject(e);\\n });\\n }),\\n sendMessage,\\n deleteMessage,\\n editMessage: ({ message, chat, parent_message }, callback) => {\\n if (!chat || !chat.type) {\\n return;\\n }\\n return fetchKey({ chat }).then((key) => {\\n const params = {};\\n return encrypt(\\n message.text,\\n message.images,\\n message.files,\\n key,\\n message.nonce,\\n ).then((encrypted) => {\\n if (chat.type === ChatTypes.DIRECT_MESSAGE) {\\n params.account = chat.id;\\n } else {\\n params.group = { name: chat.name };\\n }\\n params.new_message = encrypted.text;\\n params.message_id = message.id;\\n params.images = [];\\n params.files = [];\\n if (encrypted.images && encrypted.images.length > 0) {\\n params.images = encrypted.images;\\n } else if (encrypted.files && encrypted.files.length > 0) {\\n params.files = encrypted.files;\\n }\\n if (parent_message) {\\n params.parent_message = parent_message;\\n }\\n try {\\n meroshipSend(\\\'edit_message\\\', params, callback, (retry) =>\\n chat.type === ChatTypes.CHANNEL\\n ? curbApi.once(\\n \\\'subscribed\\\',\\n (name) => name === chat.name && retry(),\\n )\\n : retry(),\\n );\\n } catch (e) {\\n return Promise.reject(e);\\n }\\n });\\n });\\n },\\n readMessage: ({ chat, messageId }, callback) => {\\n if (!chat || !chat.type) {\\n return;\\n }\\n const readMessageParams =\\n chat.type === ChatTypes.CHANNEL\\n ? {\\n group: { name: chat.name },\\n }\\n : {\\n account: chat.id,\\n };\\n meroshipSend(\\n \\\'read_message\\\',\\n {\\n message_id: messageId,\\n ...readMessageParams,\\n },\\n callback,\\n );\\n },\\n getCommunities: (contracts) => {\\n return Promise.all(\\n contracts.map((contract) =>\\n Near.asyncCalimeroView(contract, \\\'public_info\\\').then(\\n (publicInfo) => ({\\n ...publicInfo,\\n assets: JSON.parse(publicInfo.assets),\\n contract,\\n }),\\n ),\\n ),\\n );\\n },\\n };\\n}, [contract, accountId]);\\n\\n/**\\n * Initial version of the chat object, currently only supports channels and p2p DMs.\\n * @typedef {object} Chat\\n * @property {string} type - Can be \\\'channel\\\' or \\\'direct_message\\\'.\\n * @property {string} [name] - Name of the channel.\\n * @property {string} [account] - Account for direct message.\\n */\\nconst [activeChat, setActiveChat] = useState({\\n type: ChatTypes.CHANNEL,\\n name: \\\'general\\\',\\n readOnly: false,\\n});\\n\\nconst [isOpenSearchChannel, setIsOpenSearchChannel] = useState(false);\\n\\nuseEffect(() => {\\n if (initialChat) {\\n setActiveChat(initialChat);\\n updateInitialChat(initialChat);\\n }\\n}, [initialChat]);\\n\\nconst [isSidebarOpen, setIsSidebarOpen] = useState(false);\\n\\nconst ContentDivContainer = styled.div`\\n width: 100%;\\n @media (min-width: 1025px) {\\n height: calc(100vh - 169px);\\n display: flex;\\n }\\n`;\\n\\nconst Wrapper = styled.div`\\n @media (min-width: 1025px) {\\n flex: 1;\\n }\\n`;\\nconst updateSelectedActiveChat = useCallback((selectedChat) => {\\n setIsOpenSearchChannel(false);\\n setActiveChat(selectedChat);\\n setIsSidebarOpen(false);\\n updateInitialChat(selectedChat);\\n}, []);\\n\\nconst openSearchPage = useCallback(() => {\\n setIsOpenSearchChannel(true);\\n setIsSidebarOpen(false);\\n setActiveChat(null);\\n}, []);\\n\\nconst [isWsConnectionActive, setIsWsConnectionActive] = useState(false);\\n\\nuseEffect(() => {\\n let connected = () => setIsWsConnectionActive(true);\\n let disconnected = () => setIsWsConnectionActive(false);\\n\\n wsApi.on(\\\'connected\\\', connected).on(\\\'disconnected\\\', disconnected).connect();\\n\\n return () =>\\n wsApi\\n .off(\\\'connected\\\', connected)\\n .off(\\\'disconnected\\\', disconnected)\\n .disconnect();\\n}, []);\\n\\nreturn (\\n <>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.NavbarContainer`}\\n props={{\\n componentOwnerId,\\n activeChat,\\n isSidebarOpen,\\n setIsSidebarOpen,\\n curbApi,\\n enableCommunities,\\n isOpenSearchChannel,\\n }}\\n />\\n <ContentDivContainer>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.ChannelsContainer`}\\n props={{\\n componentOwnerId,\\n curbApi,\\n onChatSelected: updateSelectedActiveChat,\\n activeChat,\\n isSidebarOpen,\\n enableCommunities,\\n isWsConnectionActive,\\n wsApi,\\n handleContractChange,\\n communities,\\n selectedCommunity: contract,\\n setIsOpenSearchChannel: () => openSearchPage(),\\n isOpenSearchChannel,\\n }}\\n />\\n {!isSidebarOpen && (\\n <Wrapper>\\n {!isOpenSearchChannel && (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.ChatContainer`}\\n props={{\\n componentOwnerId,\\n contract,\\n curbApi,\\n activeChat,\\n accountId,\\n wsApi,\\n isWsConnectionActive,\\n setIsOpenSearchChannel: () => openSearchPage(),\\n onJoinedChat: updateSelectedActiveChat,\\n }}\\n />\\n )}\\n {isOpenSearchChannel && (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.SearchChannels.SearchChannelsContainer`}\\n props={{\\n componentOwnerId,\\n curbApi,\\n accountId,\\n onChatSelected: updateSelectedActiveChat,\\n }}\\n />\\n )}\\n </Wrapper>\\n )}\\n </ContentDivContainer>\\n </>\\n);\\n"

},

"Calimero.Curb.Chat.MessageInput": {

"": "const {\\n componentOwnerId,\\n selectedChat,\\n sendMessage,\\n openThread,\\n isThread,\\n isReadOnly,\\n isOwner,\\n isModerator,\\n fetchAccounts,\\n} = props;\\n\\nconst Container = styled.div`\\n position: absolute;\\n width: 100%;\\n bottom: 16px;\\n padding-left: 16px;\\n padding-right: 16px;\\n padding-top: 12px;\\n padding-bottom: 12px;\\n background-color: #1d1d21;\\n display: flex;\\n align-items: end;\\n @media (min-width: 1025px) {\\n gap: 8px;\\n border-radius: 4px;\\n }\\n @media (max-width: 1024px) {\\n position: fixed;\\n margin: 0 !important;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n border-top-left-radius: 4px;\\n border-top-right-radius: 4px;\\n gap: 4px;\\n margin: 0px;\\n padding-left: 8px;\\n padding-right: 8px;\\n padding-bottom: 12px;\\n padding-top: 12px;\\n width: 100% !important;\\n }\\n`;\\n\\nconst EmojiPopupContainer = styled.div`\\n position: absolute;\\n bottom: 70px;\\n right: 2.5rem;\\n`;\\n\\nconst UploadPopupContainer = styled.div`\\n position: absolute;\\n bottom: 46px;\\n left: 16px;\\n border-radius: 8px;\\n padding: 8px;\\n background-color: #1d1d21;\\n @media (max-width: 1024px) {\\n left: 8px;\\n }\\n`;\\n\\nconst UploadContainer = styled.div`\\n width: fit-content;\\n display: grid;\\n gap: 4px;\\n`;\\n\\nconst [showUpload, setShowUpload] = useState(false);\\nconst [message, setMessage] = useState(\\\'\\\');\\n//Message is cleaned in Quill after it is returned to bos components so\\n//this ref is setting value from callback to be used after sending with ENTER key\\nconst messageRef = useRef(null);\\nconst [uploadedFile, setUploadedFile] = useState(null);\\nconst [uploadedImage, setUploadedImage] = useState(null);\\nconst [emojiSelectorOpen, setEmojiSelectorOpen] = useState(false);\\nconst [error, setError] = useState(\\\'\\\');\\nconst [sendFromLib, setSendFromLib] = useState(false);\\n\\nconst handleMessageChange = useCallback((mesage) => {\\n setMessage(mesage);\\n}, []);\\n\\nconst resetFile = useCallback(() => {\\n setUploadedFile(null);\\n setShowUpload(false);\\n}, []);\\n\\nconst resetImage = useCallback(() => {\\n setUploadedImage(null);\\n setShowUpload(false);\\n}, []);\\n\\nconst emptyText = /^(\\\\s*<p><br><\\\\/p>\\\\s*)*$/;\\nconst markdownParser = (text) => {\\n const toHTML = text.replace(\\n /(\\\\b(https?:\\\\/\\\\/[^\\\\s<]+\\\\/?)\\\\b)|^(#####|####|###|##|#) (.*)$|(@everyone)|(@here)|(@[a-z\\\\d]+[-_]*[a-z\\\\d]+[-_]*[a-z\\\\d]+\\\\.(near|testnet))|<p><br><\\\\/p>(?=\\\\s*$)/gim,\\n (\\n match,\\n url,\\n url2,\\n heading,\\n text,\\n everyoneMention,\\n hereMention,\\n validMention,\\n ) => {\\n if (url || url2) {\\n return `<a href=\\\"${url || url2}\\\" class=\\\"url-link\\\" target=\\\"_blank\\\">${\\n url || url2\\n }</a>`;\\n } else if (heading) {\\n return text;\\n } else if (everyoneMention) {\\n return `<span class=\\\'mention-everyone\\\'>@everyone</span>`;\\n } else if (hereMention) {\\n return `<span class=\\\'mention-here\\\'>@here</span>`;\\n } else if (validMention) {\\n return `<span class=\\\'mention mention-user-${validMention\\n .replace(\\\'@\\\', \\\'\\\')\\n .replace(/\\\\./g, \\\'\\\\\\\\.\\\')\\n .replace(/_/g, \\\'\\\\\\\\_\\\')}\\\'>${validMention}</span>`;\\n } else {\\n return \\\'\\\';\\n }\\n },\\n );\\n\\n return toHTML;\\n};\\n\\nconst isActive =\\n (message && !emptyText.test(markdownParser(message))) ||\\n uploadedImage ||\\n uploadedFile;\\n\\nconst handleSendMessage = useCallback(\\n (vmValue) => {\\n const messageToSend = vmValue || message;\\n if (\\n (uploadedFile && !uploadedFile.file.content) ||\\n (uploadedImage && !uploadedImage.file.content)\\n ) {\\n return;\\n } else if (\\n emptyText.test(markdownParser(messageToSend)) &&\\n !uploadedImage &&\\n !uploadedFile\\n ) {\\n handleMessageChange(\\\'\\\');\\n messageRef.current = \\\'\\\';\\n } else {\\n sendMessage(\\n markdownParser(messageToSend),\\n uploadedImage,\\n uploadedFile,\\n openThread,\\n );\\n resetImage();\\n resetFile();\\n setShowUpload(false);\\n setEmojiSelectorOpen(false);\\n handleMessageChange(\\\'\\\');\\n messageRef.current = \\\'\\\';\\n }\\n },\\n [message, uploadedImage, uploadedFile, openThread, selectedChat],\\n);\\n\\nuseEffect(() => {\\n if (sendFromLib) {\\n handleSendMessage(messageRef.current);\\n setSendFromLib(false);\\n }\\n}, [sendFromLib]);\\n\\n//Hack for https://stackoverflow.com/questions/57847594/react-hooks-accessing-up-to-date-state-from-within-a-callback\\n//as passed handleSendMessage to input field component use staled useState values\\nconst handleSendMessageFromLib = (value) => {\\n messageRef.current = value;\\n setSendFromLib(true);\\n};\\n\\nconst Wrapper = styled.div`\\n flex-grow: 1;\\n display: contents;\\n align-items: start;\\n background-color: #111111;\\n`;\\n\\nconst FullWidthWrapper = styled.div`\\n display: flow;\\n flex-direction: row;\\n overflow: hidden;\\n align-items: start;\\n width: 100%;\\n`;\\n\\nconst IconUploadContainer = styled.div`\\n fill: #686672;\\n height: 2rem;\\n width: 2rem;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n flex: 1 0 auto;\\n :hover {\\n fill: white;\\n }\\n`;\\n\\nconst IconUploadSvg = styled.svg`\\n cursor: pointer;\\n height: 1.5em;\\n width: 1.5em;\\n`;\\n\\nconst IconUpload = ({ onClick, isActive }) => (\\n <IconUploadContainer onClick={onClick}>\\n <IconUploadSvg\\n xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n fill={`${isActive ? \\\'white\\\' : \\\'#686672\\\'}`}\\n >\\n <path d=\\\"M24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12ZM12.75 6.75C12.75 6.55109 12.671 6.36032 12.5303 6.21967C12.3897 6.07902 12.1989 6 12 6C11.8011 6 11.6103 6.07902 11.4697 6.21967C11.329 6.36032 11.25 6.55109 11.25 6.75V11.25H6.75C6.55109 11.25 6.36032 11.329 6.21967 11.4697C6.07902 11.6103 6 11.8011 6 12C6 12.1989 6.07902 12.3897 6.21967 12.5303C6.36032 12.671 6.55109 12.75 6.75 12.75H11.25V17.25C11.25 17.4489 11.329 17.6397 11.4697 17.7803C11.6103 17.921 11.8011 18 12 18C12.1989 18 12.3897 17.921 12.5303 17.7803C12.671 17.6397 12.75 17.4489 12.75 17.25V12.75H17.25C17.4489 12.75 17.6397 12.671 17.7803 12.5303C17.921 12.3897 18 12.1989 18 12C18 11.8011 17.921 11.6103 17.7803 11.4697C17.6397 11.329 17.4489 11.25 17.25 11.25H12.75V6.75Z\\\" />\\n </IconUploadSvg>\\n </IconUploadContainer>\\n);\\n\\nconst EmojiContainer = styled.div`\\n fill: #686672;\\n height: 2rem;\\n width: 2rem;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n :hover {\\n fill: #ffdd1d;\\n }\\n`;\\n\\nconst IconEmojiSvg = styled.svg`\\n cursor: pointer;\\n height: 1.5em;\\n width: 1.5em;\\n`;\\n\\nconst IconEmoji = () => {\\n return (\\n <EmojiContainer>\\n <IconEmojiSvg xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <path d=\\\"M12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0V0ZM10.5 9.75C10.5 8.508 9.828 7.5 9 7.5C8.172 7.5 7.5 8.508 7.5 9.75C7.5 10.992 8.172 12 9 12C9.828 12 10.5 10.992 10.5 9.75ZM6.4275 14.3505C6.25525 14.45 6.12955 14.6138 6.07808 14.8059C6.0266 14.998 6.05355 15.2027 6.153 15.375C6.74532 16.4015 7.59758 17.2539 8.62401 17.8464C9.65045 18.4389 10.8148 18.7505 12 18.75C13.1851 18.7502 14.3494 18.4385 15.3758 17.846C16.4021 17.2536 17.2545 16.4013 17.847 15.375C17.897 15.2897 17.9297 15.1953 17.9431 15.0973C17.9565 14.9993 17.9504 14.8996 17.9251 14.804C17.8998 14.7084 17.8558 14.6187 17.7958 14.5401C17.7357 14.4615 17.6607 14.3956 17.575 14.3462C17.4893 14.2967 17.3947 14.2647 17.2967 14.2519C17.1986 14.2392 17.0989 14.246 17.0035 14.2719C16.908 14.2978 16.8186 14.3423 16.7405 14.4029C16.6623 14.4636 16.5969 14.539 16.548 14.625C16.0873 15.4235 15.4244 16.0866 14.626 16.5474C13.8276 17.0082 12.9219 17.2505 12 17.25C11.0781 17.2505 10.1724 17.0082 9.37399 16.5474C8.57558 16.0866 7.91267 15.4235 7.452 14.625C7.35254 14.4527 7.18873 14.3271 6.9966 14.2756C6.80447 14.2241 6.59976 14.251 6.4275 14.3505ZM14.1555 9.3855C14.1076 9.29942 14.0433 9.22361 13.9661 9.1624C13.8889 9.10119 13.8005 9.05577 13.7058 9.02875C13.6111 9.00173 13.5119 8.99363 13.4141 9.00491C13.3162 9.01619 13.2216 9.04663 13.1355 9.0945C13.0494 9.14237 12.9736 9.20672 12.9124 9.28389C12.8512 9.36105 12.8058 9.44952 12.7788 9.54423C12.7517 9.63895 12.7436 9.73806 12.7549 9.83591C12.7662 9.93375 12.7966 10.0284 12.8445 10.1145C13.3395 11.007 14.2815 11.625 15.375 11.625C16.47 11.625 17.409 11.007 17.9055 10.1145C17.9534 10.0284 17.9838 9.93375 17.9951 9.83591C18.0064 9.73806 17.9983 9.63895 17.9712 9.54423C17.9442 9.44952 17.8988 9.36105 17.8376 9.28389C17.7764 9.20672 17.7006 9.14237 17.6145 9.0945C17.5284 9.04663 17.4338 9.01619 17.3359 9.00491C17.2381 8.99363 17.1389 9.00173 17.0442 9.02875C16.9495 9.05577 16.861 9.10119 16.7839 9.1624C16.7067 9.22361 16.6424 9.29942 16.5945 9.3855C16.4761 9.60666 16.3004 9.79196 16.0859 9.92204C15.8714 10.0521 15.6259 10.1222 15.375 10.125C15.1241 10.1222 14.8786 10.0521 14.6641 9.92204C14.4496 9.79196 14.2739 9.60666 14.1555 9.3855Z\\\" />\\n </IconEmojiSvg>\\n </EmojiContainer>\\n );\\n};\\nconst IconContainer = styled.div`\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n height: 2em;\\n width: 2em;\\n flex: 1 0 auto;\\n`;\\n\\nconst IconSendSvg = styled.svg`\\n :hover {\\n fill: #4e95ff;\\n }\\n cursor: pointer;\\n height: 1.5em;\\n width: 1.5em;\\n`;\\nconst IconSend = ({ onClick, isActive }) => (\\n <IconContainer onClick={onClick}>\\n <IconSendSvg\\n xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n fill={`${isActive ? \\\'#4E95FF\\\' : \\\'#686672\\\'}`}\\n >\\n <path\\n fillRule=\\\"evenodd\\\"\\n clipRule=\\\"evenodd\\\"\\n d=\\\"M23.9459 1.02895C24.0005 0.892657 24.0138 0.743347 23.9843 0.599532C23.9548 0.455718 23.8838 0.323724 23.7799 0.219914C23.6761 0.116105 23.5441 0.0450444 23.4003 0.0155432C23.2565 -0.013958 23.1072 -0.00060275 22.9709 0.0539533L1.1504 8.78245H1.1489L0.470904 9.05245C0.342489 9.10368 0.230732 9.1894 0.147977 9.30015C0.0652226 9.4109 0.0146909 9.54237 0.00196413 9.68004C-0.0107627 9.8177 0.0148107 9.95621 0.0758594 10.0803C0.136908 10.2043 0.231056 10.3091 0.347904 10.383L0.962904 10.773L0.964404 10.776L8.4569 15.543L13.2239 23.0355L13.2269 23.0385L13.6169 23.6535C13.691 23.7699 13.7959 23.8635 13.9198 23.9242C14.0438 23.9849 14.182 24.0102 14.3194 23.9973C14.4568 23.9844 14.588 23.9339 14.6986 23.8512C14.8091 23.7686 14.8947 23.6571 14.9459 23.529L23.9459 1.02895ZM21.1964 3.86395L21.9029 2.09695L20.1359 2.80345L8.8949 14.0445L9.4019 14.367C9.49494 14.426 9.57381 14.5049 9.6329 14.598L9.9554 15.105L21.1964 3.86395Z\\\"\\n />\\n </IconSendSvg>\\n </IconContainer>\\n);\\n\\nconst Placeholder = styled.div`\\n position: absolute;\\n z-index: 10;\\n bottom: ${({ placeholderPosition }) =>\\n placeholderPosition && placeholderPosition};\\n left: 68px;\\n color: #686672;\\n font-size: 16px;\\n font-style: normal;\\n font-weight: 400;\\n line-height: 150%;\\n pointer-events: none;\\n @media (max-width: 1024px) {\\n font-size: 14px;\\n font-style: normal;\\n font-weight: 400;\\n line-height: 150%;\\n bottom: ${({ placeholderPositionMobile }) =>\\n placeholderPositionMobile && placeholderPositionMobile};\\n left: 56px;\\n }\\n`;\\n\\nconst getCustomStyle = (openThread) => {\\n const customStyle = {\\n width: \\\'calc(100% - 440px)\\\',\\n marginLeft: \\\'2.5rem\\\',\\n marginRight: \\\'2.5rem\\\',\\n };\\n if (openThread && !isThread) {\\n customStyle.width = \\\'calc(60% - 262px)\\\';\\n customStyle.marginRight = \\\'1.25rem\\\';\\n } else if (!openThread && !isThread) {\\n customStyle.width = \\\'calc(100% - 440px)\\\';\\n } else if (openThread && isThread) {\\n customStyle.width = \\\'calc(40% - 212px)\\\';\\n customStyle.marginLeft = \\\'0rem\\\';\\n customStyle.marginRight = \\\'1.25rem\\\';\\n }\\n return customStyle;\\n};\\n\\nconst ReadOnlyField = styled.div`\\n background-color: #111111;\\n height: 2rem;\\n border-radius: 4px;\\n padding: 4px 8px 4px 8px;\\n font-family: Helvetica Neue;\\n font-size: 16px;\\n font-style: normal;\\n font-weight: 400;\\n line-height: 150%;\\n color: #797978;\\n flex: 1;\\n @media (max-width: 1024px) {\\n font-size: 14px;\\n display: flex;\\n align-items: center;\\n }\\n`;\\n\\nlet canWriteMessage = false;\\nif (isReadOnly) {\\n if (isModerator || isOwner) {\\n canWriteMessage = true;\\n } else {\\n canWriteMessage = false;\\n }\\n} else {\\n canWriteMessage = true;\\n}\\n\\nlet placeholderPosition = \\\'16px\\\';\\n\\nconst [showAutocomplete, setShowAutocomplete] = useState(false);\\n\\nconst autoCompleteAccountId = (accountId) => {\\n let text = message.replace(/[\\\\s]{0,1}@[^\\\\s]*$/, \\\'\\\');\\n text = `${text} @${accountId}`.trim() + \\\' \\\\u200B\\\';\\n setMessage(text);\\n setShowAutocomplete(false);\\n};\\n\\nuseEffect(() => {\\n const showAccountAutocomplete = /@[\\\\w][^\\\\s]*$/.test(message);\\n setShowAutocomplete(showAccountAutocomplete);\\n}, [message]);\\n\\nconst ImageIconSvg = () => (\\n <svg width=\\\"16\\\" height=\\\"16\\\" fill=\\\"#fff\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <path\\n d=\\\"M0.00146484 2.99902C0.00146484 2.46859 0.212179 1.95988 0.587251 1.58481C0.962324 1.20974 1.47103 0.999023 2.00146 0.999023H14.0015C14.5319 0.999023 15.0406 1.20974 15.4157 1.58481C15.7908 1.95988 16.0015 2.46859 16.0015 2.99902V12.999C16.0015 13.5295 15.7908 14.0382 15.4157 14.4132C15.0406 14.7883 14.5319 14.999 14.0015 14.999H2.00146C1.47103 14.999 0.962324 14.7883 0.587251 14.4132C0.212179 14.0382 0.00146484 13.5295 0.00146484 12.999V2.99902ZM1.00146 11.999V12.999C1.00146 13.2642 1.10682 13.5186 1.29436 13.7061C1.48189 13.8937 1.73625 13.999 2.00146 13.999H14.0015C14.2667 13.999 14.521 13.8937 14.7086 13.7061C14.8961 13.5186 15.0015 13.2642 15.0015 12.999V9.49902L11.2245 7.55202C11.1307 7.50505 11.0245 7.48875 10.921 7.50544C10.8174 7.52213 10.7217 7.57096 10.6475 7.64502L6.93747 11.355L4.27746 9.58302C4.18142 9.51908 4.06623 9.49032 3.9514 9.50162C3.83658 9.51292 3.7292 9.56359 3.64746 9.64502L1.00146 11.999ZM6.00146 5.49902C6.00146 5.1012 5.84343 4.71967 5.56213 4.43836C5.28082 4.15706 4.89929 3.99902 4.50146 3.99902C4.10364 3.99902 3.72211 4.15706 3.4408 4.43836C3.1595 4.71967 3.00146 5.1012 3.00146 5.49902C3.00146 5.89685 3.1595 6.27838 3.4408 6.55968C3.72211 6.84099 4.10364 6.99902 4.50146 6.99902C4.89929 6.99902 5.28082 6.84099 5.56213 6.55968C5.84343 6.27838 6.00146 5.89685 6.00146 5.49902Z\\\"\\n fill=\\\"#686672\\\"\\n />\\n </svg>\\n);\\n\\nconst FileIconSvg = () => (\\n <svg width=\\\"16\\\" height=\\\"16\\\" fill=\\\"#fff\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <path\\n d=\\\"M4.49951 2.99902C4.49951 2.33598 4.7629 1.7001 5.23174 1.23126C5.70059 0.762416 6.33647 0.499023 6.99951 0.499023C7.66255 0.499023 8.29844 0.762416 8.76728 1.23126C9.23612 1.7001 9.49951 2.33598 9.49951 2.99902V11.999C9.49951 12.3968 9.34148 12.7784 9.06017 13.0597C8.77887 13.341 8.39734 13.499 7.99951 13.499C7.60169 13.499 7.22016 13.341 6.93885 13.0597C6.65755 12.7784 6.49951 12.3968 6.49951 11.999V4.99902C6.49951 4.86642 6.55219 4.73924 6.64596 4.64547C6.73973 4.5517 6.8669 4.49902 6.99951 4.49902C7.13212 4.49902 7.2593 4.5517 7.35307 4.64547C7.44683 4.73924 7.49951 4.86642 7.49951 4.99902V11.999C7.49951 12.1316 7.55219 12.2588 7.64596 12.3526C7.73973 12.4463 7.8669 12.499 7.99951 12.499C8.13212 12.499 8.2593 12.4463 8.35307 12.3526C8.44683 12.2588 8.49951 12.1316 8.49951 11.999V2.99902C8.49951 2.80204 8.46071 2.60699 8.38533 2.425C8.30995 2.24301 8.19946 2.07765 8.06017 1.93836C7.92088 1.79908 7.75553 1.68859 7.57354 1.6132C7.39155 1.53782 7.19649 1.49902 6.99951 1.49902C6.80253 1.49902 6.60748 1.53782 6.42549 1.6132C6.2435 1.68859 6.07814 1.79908 5.93885 1.93836C5.79956 2.07765 5.68907 2.24301 5.61369 2.425C5.53831 2.60699 5.49951 2.80204 5.49951 2.99902V11.999C5.49951 12.6621 5.7629 13.2979 6.23174 13.7668C6.70059 14.2356 7.33647 14.499 7.99951 14.499C8.66255 14.499 9.29844 14.2356 9.76728 13.7668C10.2361 13.2979 10.4995 12.6621 10.4995 11.999V4.99902C10.4995 4.86642 10.5522 4.73924 10.646 4.64547C10.7397 4.5517 10.8669 4.49902 10.9995 4.49902C11.1321 4.49902 11.2593 4.5517 11.3531 4.64547C11.4468 4.73924 11.4995 4.86642 11.4995 4.99902V11.999C11.4995 12.9273 11.1308 13.8175 10.4744 14.4739C9.81801 15.1303 8.92777 15.499 7.99951 15.499C7.07125 15.499 6.18102 15.1303 5.52464 14.4739C4.86826 13.8175 4.49951 12.9273 4.49951 11.999V2.99902Z\\\"\\n fill=\\\"#686672\\\"\\n />\\n </svg>\\n);\\n\\nconst ErrorContainer = styled.div`\\n position: relative;\\n top: 0;\\n padding-top: 4px;\\n padding-bottom: 4px;\\n padding-left: 8px;\\n display: flex;\\n width: 206px;\\n color: #dc3545;\\n font-family: Helvetica Neue;\\n font-size: 14px;\\n font-style: normal;\\n font-weight: 400;\\n line-height: 150%;\\n background-color: #25252a;\\n border-radius: 2px;\\n`;\\n\\nconst filterHtml = (message, emoji) => {\\n if (!message) {\\n return `<p>${emoji}</p>`;\\n }\\n const endingsToCheck = [\\n \\\'<br>\\\',\\n \\\'<br></p>\\\',\\n \\\'</p>\\\',\\n \\\'</strong>\\\',\\n \\\'<br></li></ul>\\\',\\n \\\'</li></ul>\\\',\\n \\\'</em>\\\',\\n \\\'</u>\\\',\\n \\\'<br></li></ol>\\\',\\n \\\'</li></ol>\\\',\\n ];\\n\\n for (const ending of endingsToCheck) {\\n if (message.endsWith(ending)) {\\n const lastIndex = message.lastIndexOf(ending);\\n return message.substring(0, lastIndex) + emoji + ending;\\n }\\n }\\n};\\n\\nconst addEmojiToMessage = (emoji) => {\\n const text = filterHtml(message, emoji);\\n setMessage(text);\\n};\\nconst [accountData, setAccountData] = useState([]);\\n\\nconst debouncedFetchUsers = (value) => {\\n setTimeout(\\n () =>\\n fetchAccounts(value.toLowerCase()).then((users) => {\\n const accounts = users.map((account) => {\\n return {\\n id: account.id,\\n active: account.active,\\n };\\n });\\n setAccountData(accounts);\\n }),\\n 500,\\n );\\n};\\n\\nuseEffect(() => {\\n const term = message.split(\\\'@\\\').pop().split(\\\'<\\\')[0];\\n if (term) {\\n debouncedFetchUsers(term);\\n }\\n}, [showAutocomplete]);\\n\\nreturn (\\n <>\\n {canWriteMessage && (\\n <Container\\n style={getCustomStyle(openThread, isThread)}\\n key={openThread.id}\\n >\\n {false && (\\n <IconUpload\\n onClick={() => {\\n setError(\\\'\\\');\\n if (!uploadedFile.file.cid && !uploadedImage.file.cid) {\\n setEmojiSelectorOpen(false);\\n setShowUpload(!showUpload);\\n }\\n }}\\n isActive={showUpload}\\n />\\n )}\\n <Wrapper>\\n <FullWidthWrapper>\\n <ChatInputField\\n setValue={setMessage}\\n value={message}\\n handleMessageSend={handleSendMessageFromLib}\\n />\\n {showAutocomplete && accountData.length > 0 && (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.AutocompleteList`}\\n props={{\\n componentOwnerId,\\n onSelect: autoCompleteAccountId,\\n accountData,\\n }}\\n />\\n )}\\n </FullWidthWrapper>\\n {(!message || emptyText.test(markdownParser(message))) && (\\n <Placeholder placeholderPosition={placeholderPosition}>\\n {openThread && isThread\\n ? `Reply in thread`\\n : `Type message in ${selectedChat}`}\\n </Placeholder>\\n )}\\n\\n {uploadedFile.file.content && (\\n <>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.MessageFileField`}\\n props={{\\n file: uploadedFile.file,\\n resetFile,\\n }}\\n />\\n </>\\n )}\\n {uploadedImage.file.content && (\\n <>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.MessageImageField`}\\n props={{\\n file: uploadedImage.file,\\n resetImage,\\n }}\\n />\\n </>\\n )}\\n </Wrapper>\\n <div onClick={() => setEmojiSelectorOpen(!emojiSelectorOpen)}>\\n <IconEmoji />\\n </div>\\n <IconSend\\n onClick={() => {\\n if (isActive) {\\n handleSendMessage();\\n }\\n }}\\n isActive={isActive}\\n />\\n {emojiSelectorOpen && (\\n <EmojiPopupContainer>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.EmojiSelector.EmojiSelector`}\\n props={{\\n OnEmojiSelected: (emoji) => addEmojiToMessage(emoji),\\n }}\\n key={\\\'message-input-emoji-component\\\'}\\n />\\n </EmojiPopupContainer>\\n )}\\n {showUpload &&\\n !uploadedFile.file.content &&\\n !uploadedImage.file.content && (\\n <UploadPopupContainer>\\n {error && <ErrorContainer>{error}</ErrorContainer>}\\n <UploadContainer>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.UploadComponent`}\\n props={{\\n uploadedFile: uploadedImage,\\n setUploadedFile: setUploadedImage,\\n type: [\\\'image/jpeg\\\', \\\'image/png\\\', \\\'image/gif\\\'],\\n icon: <ImageIconSvg />,\\n text: \\\'Upload Photo\\\',\\n setError: setError,\\n }}\\n key=\\\"images-component\\\"\\n />\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.UploadComponent`}\\n props={{\\n uploadedFile: uploadedFile,\\n setUploadedFile: setUploadedFile,\\n type: [\\\'*/*\\\'],\\n icon: <FileIconSvg />,\\n text: \\\'Upload File\\\',\\n setError: setError,\\n }}\\n key=\\\"files-component\\\"\\n />\\n </UploadContainer>\\n </UploadPopupContainer>\\n )}\\n </Container>\\n )}\\n {!canWriteMessage && (\\n <Container\\n style={getCustomStyle(openThread, isThread)}\\n key={openThread.id}\\n >\\n <ReadOnlyField>\\n You don't have permissions to write in this channel\\n </ReadOnlyField>\\n </Container>\\n )}\\n </>\\n);\\n"

},

"Calimero.Curb.Chat.ChatContainer": {

"": "const componentOwnerId = props.componentOwnerId;\\nconst contract = props.contract;\\nconst curbApi = props.curbApi;\\nconst activeChat = props.activeChat;\\nconst accountId = props.accountId;\\nconst wsApi = props.wsApi;\\nconst isWsConnectionActive = props.isWsConnectionActive;\\nconst setIsOpenSearchChannel = props.setIsOpenSearchChannel;\\nconst onJoinedChat = props.onJoinedChat;\\n\\nconst ChatContainer = styled.div`\\n display: flex;\\n @media (min-width: 1025px) {\\n padding-left: 4px;\\n height: calc(100vh - 169px);\\n }\\n @media (max-width: 1024px) {\\n display: flex;\\n flex-direction: column;\\n padding-top: 104px;\\n }\\n`;\\n\\nconst ThreadWrapper = styled.div`\\n height: 100%;\\n flex: 1;\\n border-left: 2px solid #282933;\\n padding-left: 20px;\\n @media (max-width: 1024px) {\\n border-left: none;\\n position: fixed;\\n left: 0;\\n right: 0; /* Set both left and right to 0 to stretch to full width */\\n top: 50%; /* Vertically center the element */\\n transform: translateY(-50%); /* Center it vertically */\\n z-index: 30;\\n background-color: #0e0e10;\\n }\\n`;\\n\\nconst [openThread, setOpenThread] = useState(undefined);\\nconst [incomingMessages, setIncomingMessages] = useState([]);\\nconst [updatedMessages, setUpdatedMessages] = useState([]);\\nconst [incomingThreadMessages, setIncomingThreadMessages] = useState([]);\\nconst [updatedThreadMessages, setUpdatedThreadMessages] = useState([]);\\nconst [isEmojiSelectorVisible, setIsEmojiSelectorVisible] = useState(false);\\nconst [messageWithEmojiSelector, setMessageWithEmojiSelector] = useState(false);\\nconst [channelMeta, setChannelMeta] = useState({});\\nconst [channelUserList, setChannelUserList] = useState([]);\\n\\nconst [openMobileReactions, setOpenMobileReactions] = useState(\\\'\\\');\\n\\nuseEffect(() => {\\n if (activeChat.type === \\\'channel\\\') {\\n curbApi.getChannelMeta(activeChat.name).then(setChannelMeta);\\n curbApi.getChannelMembers(activeChat.name).then(setChannelUserList);\\n }\\n}, [activeChat]);\\n\\nconst toggleEmojiSelector = useCallback(\\n (message) => {\\n setMessageWithEmojiSelector(message);\\n setIsEmojiSelectorVisible((prev) => !prev);\\n },\\n [setIsEmojiSelectorVisible],\\n);\\n\\nconst activeChatRef = useRef(activeChat);\\nconst openThreadRef = useRef(openThread);\\n\\nuseEffect(() => {\\n if (activeChat.type === \\\'channel\\\' && isWsConnectionActive) {\\n // todo! move this to page initialization\\n // todo! basically, once the page has loaded,\\n // todo! and we\\\'ve fetched channels, subscribe to them\\n wsApi.methods.subscribe(\\n { [contract]: [activeChat.name] },\\n (err, result) => {\\n if (err) return console.log(\\\'error subscribing to channel\\\', err);\\n console.log(\\\'subscribed to\\\', activeChat, err, result);\\n curbApi.emit(\\\'subscribed\\\', activeChat.name);\\n },\\n );\\n }\\n activeChatRef.current = activeChat;\\n}, [activeChat, isWsConnectionActive]);\\n\\nconst editingMessageRef = useRef(null);\\n\\nuseEffect(() => {\\n if (editingMessageRef.current) {\\n const update = [\\n {\\n id: editingMessageRef.current.id,\\n descriptor: {\\n updatedFields: { editMode: false },\\n },\\n },\\n ];\\n setUpdatedMessages(update);\\n }\\n editingMessageRef.current = null;\\n}, [activeChatRef.current]);\\n\\nuseEffect(() => {\\n setOpenThread(undefined);\\n}, [activeChat]);\\n\\nuseEffect(() => {\\n openThreadRef.current = openThread;\\n}, [openThread]);\\n\\nconst computeReaction = useCallback((message, reaction, sender) => {\\n const accounts = message.reactions[reaction] ?? [];\\n let update;\\n if (accounts.includes(sender)) {\\n update = accounts.filter((a) => a !== sender);\\n } else {\\n update = [...accounts, sender];\\n }\\n return { reactions: { ...message.reactions, [reaction]: update } };\\n}, []);\\n\\nuseEffect(() => {\\n const messageListener = (event) => {\\n if (\\n (activeChatRef.current.type === \\\'direct_message\\\' &&\\n event.sender === activeChatRef.current.id) ||\\n (activeChatRef.current.type === \\\'channel\\\' &&\\n event.receiver.type === \\\'channel\\\' &&\\n event.receiver.name === activeChatRef.current.name)\\n ) {\\n curbApi\\n .fetchKey({ chat: activeChatRef.current })\\n .then((key) => {\\n const decryptedMessages = curbApi.decryptMessages([event], key);\\n const newChannelMessages = [];\\n const openedThreadMessages = [];\\n //record of keys which are id of parent messages and number of new messages that represents addition on threadsCount\\n const notOpenedThreadsMessagesSet = {};\\n //for each decrypted message check if it is in channel or in thread\\n decryptedMessages.map((message) => {\\n message.key = key;\\n //thread message\\n if (message.parent_message) {\\n if (message.parent_message === openThreadRef.current.id) {\\n //currently opened thread message\\n openedThreadMessages.push(message);\\n }\\n //update threads count\\n if (message.parent_message in notOpenedThreadsMessagesSet) {\\n notOpenedThreadsMessagesSet[message.parent_message]++;\\n } else {\\n // If key doesn\\\'t exist, initialize with 1\\n notOpenedThreadsMessagesSet[message.parent_message] = 1;\\n }\\n } else {\\n //channel message\\n newChannelMessages.push(message);\\n }\\n });\\n\\n //update messages count in closed threads\\n Object.entries(notOpenedThreadsMessagesSet).forEach(\\n ([key, value]) => {\\n const parentUpdate = [\\n {\\n id: key,\\n descriptor: {\\n updateFunction: (message) => ({\\n threadCount: message.threadCount + value,\\n threadLastTimestamp: Date.now(),\\n }),\\n },\\n },\\n ];\\n setUpdatedMessages(parentUpdate);\\n },\\n );\\n\\n //update messages in opened thread\\n if (openedThreadMessages.length > 0) {\\n console.log(\\\'update messages in opened thread\\\');\\n setOpenThread({\\n ...openThreadRef.current,\\n threadCount: openThreadRef.current.threadCount + 1,\\n });\\n setIncomingThreadMessages(openedThreadMessages);\\n }\\n\\n if (newChannelMessages.length > 0) {\\n //update messages outside thread\\n setIncomingMessages(newChannelMessages);\\n }\\n })\\n .catch((err) => {\\n console.log(\\\'Failing to decrypt message\\\', err);\\n });\\n }\\n };\\n const reactionListener = (event) => {\\n const { message_id, reaction, sender } = event;\\n const updateFunction = (message) =>\\n computeReaction(message, reaction, sender);\\n setUpdatedMessages([{ id: message_id, descriptor: { updateFunction } }]);\\n };\\n\\n const editsListener = (event) => {\\n console.log(\\\'edited message\\\', event);\\n if (\\n (activeChatRef.current.type === \\\'direct_message\\\' &&\\n event.sender === activeChatRef.current.id) ||\\n (activeChatRef.current.type === \\\'channel\\\' &&\\n event.receiver.type === \\\'channel\\\' &&\\n event.receiver.name === activeChatRef.current.name)\\n ) {\\n curbApi\\n .fetchKey({ chat: activeChatRef.current })\\n .then((key) => {\\n const updates = curbApi.deleteMessage([event], key).map((m) => ({\\n id: m.id,\\n descriptor: {\\n updatedFields: { ...m },\\n },\\n }));\\n if (event.parent_message === openThreadRef.current.id) {\\n console.log(\\\'updating thread messages\\\', updates);\\n setUpdatedThreadMessages(updates);\\n } else {\\n console.log(\\\'updating messages\\\', updates);\\n // TODO update thread parent if required\\n setUpdatedMessages(updates);\\n }\\n })\\n .catch((err) => {\\n console.log(\\\'Failing to decrypt message\\\', err);\\n });\\n }\\n };\\n\\n const deleteListener = (event) => {\\n if (\\n (activeChatRef.current.type === \\\'direct_message\\\' &&\\n event.sender === activeChatRef.current.id) ||\\n (activeChatRef.current.type === \\\'channel\\\' &&\\n event.receiver.type === \\\'channel\\\' &&\\n event.receiver.name === activeChatRef.current.name)\\n ) {\\n handleDeleteMessage(event);\\n }\\n };\\n\\n wsApi.notifications\\n .on(\\\'ChannelMessage\\\', messageListener)\\n .on(\\\'MessageReaction\\\', reactionListener)\\n .on(\\\'EditedMessage\\\', editsListener)\\n .on(\\\'DeletedMessage\\\', deleteListener);\\n return () => {\\n wsApi.notifications\\n .off(\\\'ChannelMessage\\\', messageListener)\\n .off(\\\'MessageReaction\\\', reactionListener)\\n .off(\\\'EditedMessage\\\', editsListener)\\n .off(\\\'DeletedMessage\\\', deleteListener);\\n };\\n}, []);\\n\\nconst readMessage = useCallback(\\n (message) => {\\n if (message?.id && message?.sender !== accountId) {\\n // we don\\\'t report our own messages\\n curbApi.readMessage({\\n chat: activeChatRef.current,\\n messageId: message.id,\\n });\\n }\\n },\\n [curbApi, accountId],\\n);\\n\\nconst handleReaction = useCallback(\\n (message, reaction) => {\\n const updates = [\\n {\\n id: message.id,\\n descriptor: {\\n updateFunction: (message) =>\\n computeReaction(message, reaction, accountId),\\n },\\n },\\n ];\\n setUpdatedMessages(updates);\\n setUpdatedThreadMessages(updates);\\n curbApi.toggleReaction({ messageId: message.id, reaction });\\n },\\n [curbApi],\\n);\\n\\nconst convertCidToUrl = (file) => {\\n const dataUrl = URL.createObjectURL(file.content);\\n return file ? { ...file, ipfs_cid: dataUrl, name: file.content.name } : null;\\n};\\n\\nconst createTemporalMessage = (text, img, uploadedFile, parentMessage) => {\\n const images = img?.file ? [convertCidToUrl(img.file)] : [];\\n const files = uploadedFile?.file ? [convertCidToUrl(uploadedFile.file)] : [];\\n const temporalId = curbApi.utils.toHexString(Crypto.randomBytes(16));\\n\\n return {\\n id: temporalId,\\n nonce: curbApi.utils.toHexString(Crypto.randomBytes(16)),\\n reactions: [],\\n images,\\n files,\\n sender: accountId,\\n text,\\n timestamp: Date.now(),\\n temporalId,\\n parent_message: parentMessage?.id,\\n status: \\\'sending\\\',\\n };\\n};\\n\\nconst submitMessage = (chat, message) =>\\n new Promise((resolve, reject) => {\\n curbApi.sendMessage(\\n {\\n message: message.text,\\n chat,\\n images: message.images,\\n files: message.files,\\n threadId: message.parent_message ? message.parent_message : undefined,\\n },\\n (err, result) => {\\n if (result) {\\n resolve(result.result.id);\\n } else {\\n reject(err);\\n }\\n },\\n );\\n });\\n\\nconst createSendMessageHandler =\\n (chat, parentMessage) => (text, img, uploadedFile) => {\\n const temporalMessage = createTemporalMessage(\\n text,\\n img,\\n uploadedFile,\\n parentMessage,\\n );\\n\\n const incomingCall = parentMessage\\n ? setIncomingThreadMessages\\n : setIncomingMessages;\\n incomingCall([temporalMessage]);\\n\\n submitMessage(chat, temporalMessage)\\n .then((realMessageId) => {\\n const update = [\\n {\\n id: temporalMessage.id,\\n descriptor: {\\n updatedFields: {\\n id: realMessageId,\\n temporalId: undefined,\\n status: \\\'sent\\\',\\n },\\n },\\n },\\n ];\\n\\n if (parentMessage) {\\n const parentUpdate = [\\n {\\n id: parentMessage.id,\\n descriptor: {\\n updateFunction: (message) => ({\\n threadCount: message.threadCount + 1,\\n threadLastTimestamp: Date.now(),\\n }),\\n },\\n },\\n ];\\n setUpdatedThreadMessages(update);\\n setUpdatedMessages(parentUpdate);\\n } else {\\n setUpdatedMessages(update);\\n }\\n })\\n .catch((err) => {\\n console.log(err);\\n const update = [\\n {\\n id: temporalMessage.id,\\n descriptor: {\\n updatedFields: {\\n temporalId: temporalMessage.id,\\n status: \\\'failed\\\',\\n },\\n },\\n },\\n ];\\n if (parentMessage) {\\n const parentUpdate = [\\n {\\n id: parentMessage.id,\\n descriptor: {\\n updateFunction: (message) => ({\\n threadCount: message.threadCount + 1,\\n threadLastTimestamp: Date.now(),\\n }),\\n },\\n },\\n ];\\n setUpdatedThreadMessages(update);\\n setUpdatedMessages(parentUpdate);\\n } else {\\n setUpdatedMessages(update);\\n }\\n });\\n };\\n\\nconst sendMessage = useMemo(\\n () => createSendMessageHandler(activeChat),\\n [activeChat],\\n);\\nconst sendThreadMessage = useMemo(\\n () => createSendMessageHandler(activeChat, openThread),\\n [activeChat, openThread],\\n);\\n\\nconst getIconFromCache = useCallback((accountId) => {\\n const fallbackImage = \\\'https://i.imgur.com/e8buxpa.png\\\';\\n return new Promise((resolve, _reject) => {\\n const profile = Social.getr(`${accountId}/profile`);\\n const baseImageObject = profile.image;\\n if (\\n !profile &&\\n !baseImageObject.url &&\\n !baseImageObject.ipfs_cid &&\\n !baseImageObject.nft\\n ) {\\n resolve(fallbackImage);\\n } else {\\n resolve(\\n `https://i.near.social/magic/thumbnail/https://near.social/magic/img/account/${accountId}`,\\n );\\n }\\n });\\n}, []);\\n\\nconst updateDeletedMessage = ({ id, parent_message }) => {\\n const update = [{ id, descriptor: { updatedFields: { deleted: true } } }];\\n if (parent_message) {\\n const parentUpdate = [\\n {\\n id: parent_message,\\n descriptor: {\\n updateFunction: (message) => ({\\n threadCount: message.threadCount - 1,\\n }),\\n },\\n },\\n ];\\n setUpdatedThreadMessages(update);\\n setUpdatedMessages(parentUpdate);\\n } else {\\n if (id === openThreadRef?.current?.id) {\\n setOpenThread(undefined);\\n }\\n setUpdatedMessages(update);\\n }\\n};\\n\\nconst handleDeleteMessage = useCallback(\\n (message) => {\\n updateDeletedMessage(message);\\n curbApi.deleteMessage({ message, chat: activeChatRef.current });\\n },\\n [curbApi, activeChat],\\n);\\n\\nconst handleEditMode = useCallback((message, isThread) => {\\n console.log(\\\'edit mode\\\', message);\\n const update = [\\n {\\n id: message.id,\\n descriptor: {\\n updatedFields: { editMode: !message.editMode },\\n },\\n },\\n ];\\n if (\\n editingMessageRef.current &&\\n editingMessageRef.current.id !== message.id\\n ) {\\n update.push({\\n id: editingMessageRef.current.id,\\n descriptor: {\\n updatedFields: { editMode: false },\\n },\\n });\\n }\\n if (isThread) {\\n setUpdatedThreadMessages(update);\\n message.isThread = true;\\n } else {\\n setUpdatedMessages(update);\\n }\\n editingMessageRef.current = message;\\n}, []);\\n\\nconst handleEditedMessage = useCallback(\\n (message) => {\\n const update = [\\n {\\n id: message.id,\\n descriptor: {\\n updatedFields: {\\n text: message.text,\\n editMode: false,\\n status: \\\'sending\\\',\\n editedOn: Date.now(),\\n },\\n },\\n },\\n ];\\n setUpdatedMessages(update);\\n const result = new Promise((resolve, reject) => {\\n curbApi.editMessage({ message, chat: activeChat }, (err, _result) => {\\n if (err) {\\n reject(err);\\n }\\n resolve(true);\\n });\\n });\\n if (result) {\\n update[0].descriptor.updatedFields.status = \\\'sent\\\';\\n setUpdatedMessages(update);\\n }\\n editingMessageRef.current = null;\\n },\\n [activeChat, curbApi, editingMessageRef],\\n);\\n\\nconst handleEditedThreadMessage = useCallback(\\n (message) => {\\n const update = [\\n {\\n id: message.id,\\n descriptor: {\\n updatedFields: {\\n text: message.text,\\n editMode: false,\\n status: \\\'sending\\\',\\n editedOn: Date.now(),\\n },\\n },\\n },\\n ];\\n setUpdatedThreadMessages(update);\\n const result = new Promise((resolve, reject) => {\\n curbApi.editMessage(\\n {\\n message,\\n chat: activeChat,\\n parent_message: openThread.id,\\n },\\n (err, _result) => {\\n if (err) {\\n reject(err);\\n }\\n resolve(true);\\n },\\n );\\n });\\n if (result) {\\n update[0].descriptor.updatedFields.status = \\\'sent\\\';\\n setUpdatedMessages(update);\\n }\\n editingMessageRef.current = null;\\n },\\n [activeChat, curbApi, openThread, editingMessageRef],\\n);\\n\\nconst selectThread = useCallback((message) => {\\n console.log(\\\'select thread\\\', message);\\n setOpenThread(message);\\n // reset thread updates\\n setIncomingThreadMessages([]);\\n setUpdatedThreadMessages([]);\\n}, []);\\n\\nconst [isEditAlertOpen, setIsEditAlertOpen] = useState(false);\\n\\nconst resetMessageEditMode = () => {\\n const update = [\\n {\\n id: editingMessageRef.current.id,\\n descriptor: {\\n updatedFields: { editMode: false },\\n },\\n },\\n ];\\n if (editingMessageRef.current.isThread) {\\n setUpdatedThreadMessages(update);\\n } else {\\n setUpdatedMessages(update);\\n }\\n setIsEditAlertOpen(false);\\n editingMessageRef.current = null;\\n};\\n\\nreturn (\\n <ChatContainer>\\n {activeChat.canJoin ? (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.JoinChannel`}\\n props={{\\n componentOwnerId,\\n channelMeta,\\n activeChat,\\n setIsOpenSearchChannel,\\n curbApi,\\n onJoinedChat,\\n }}\\n />\\n ) : (\\n <>\\n <>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.ChatDisplaySplit`}\\n props={{\\n componentOwnerId,\\n readMessage,\\n handleReaction,\\n openThread,\\n setOpenThread: selectThread,\\n activeChat,\\n accountId,\\n curbApi,\\n incomingMessages,\\n updatedMessages,\\n resetImage: props.resetImage,\\n sendMessage,\\n getIconFromCache,\\n isThread: false,\\n isReadOnly: activeChat.readOnly,\\n toggleEmojiSelector,\\n channelMeta,\\n channelUserList,\\n openMobileReactions,\\n setOpenMobileReactions,\\n onMessageDeletion: handleDeleteMessage,\\n onEditModeRequested: handleEditMode,\\n onEditModeCancelled: () => setIsEditAlertOpen(true),\\n onMessageUpdated: handleEditedMessage,\\n }}\\n />\\n </>\\n {openThread.id && (\\n <ThreadWrapper>\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.Chat.ChatDisplaySplit`}\\n props={{\\n componentOwnerId,\\n readMessage,\\n handleReaction,\\n openThread,\\n setOpenThread: selectThread,\\n activeChat,\\n accountId,\\n curbApi,\\n incomingMessages: incomingThreadMessages,\\n updatedMessages: updatedThreadMessages,\\n resetImage: props.resetImage,\\n sendMessage: sendThreadMessage,\\n getIconFromCache,\\n isThread: true,\\n isReadOnly: activeChat.readOnly,\\n toggleEmojiSelector,\\n channelMeta,\\n channelUserList,\\n openMobileReactions,\\n setOpenMobileReactions,\\n onMessageDeletion: handleDeleteMessage,\\n onEditModeRequested: handleEditMode,\\n onEditModeCancelled: () => setIsEditAlertOpen(true),\\n onMessageUpdated: handleEditedThreadMessage,\\n }}\\n />\\n </ThreadWrapper>\\n )}\\n </>\\n )}\\n {isEmojiSelectorVisible && (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Curb.EmojiSelector.EmojiSelectorPopup`}\\n props={{\\n OnEmojiSelected: (emoji) => {\\n handleReaction(messageWithEmojiSelector, emoji);\\n setIsEmojiSelectorVisible(false);\\n },\\n onClose: () => setIsEmojiSelectorVisible(false),\\n componentOwnerId,\\n }}\\n key=\\\"chat-emojis-component\\\"\\n />\\n )}\\n {isEditAlertOpen && editingMessageRef.current && (\\n <Widget\\n src={`${componentOwnerId}/widget/Calimero.Common.Popups.SaveChangesDialog`}\\n props={{\\n componentOwnerId,\\n isEditAlertOpen,\\n setIsEditAlertOpen,\\n onCancel: () => setIsEditAlertOpen(false),\\n onConfirm: () => resetMessageEditMode(),\\n }}\\n key=\\\"discard-changes-component\\\"\\n />\\n )}\\n </ChatContainer>\\n);\\n"

}

Transaction Details

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs: