@weavy/uikit-react 11.2.0 → 12.1.0

package/dist/esm/types/components/Image.d.ts

@@ -7,6 +7,8 @@ declare type ImageProps = {
     more?: number;
     onClick: (e: any) => void;
 };
+export declare function checkImageLoad(img: HTMLImageElement): void;
+export declare function imageLoaded(event: any): void;
 export declare const Image: ({ src, previewSrc, width, height, more, onClick }: ImageProps) => JSX.Element;
 declare type ImageGridProps = {
     children: React.ReactNode;

package/dist/esm/types/components/PdfViewer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    src: string;
+};
+declare const PdfViewer: ({ src }: Props) => JSX.Element;
+export default PdfViewer;

package/dist/esm/types/components/Preview.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+declare type ImageProps = {
+    src: string;
+    width?: number;
+    height?: number;
+};
+export declare const PreviewImage: ({ src, width, height }: ImageProps) => JSX.Element;
+declare type DocumentProps = {
+    src: string;
+};
+export declare const PreviewDocument: ({ src }: DocumentProps) => JSX.Element;
+declare type VideoProps = {
+    src: string;
+    name: string;
+    mediaType?: string;
+};
+export declare const PreviewVideo: ({ src, name, mediaType }: VideoProps) => JSX.Element;
+declare type AudioProps = {
+    src: string;
+    name: string;
+    mediaType?: string;
+};
+export declare const PreviewAudio: ({ src, name, mediaType }: AudioProps) => JSX.Element;
+declare type TextProps = {
+    src: string;
+    html?: boolean;
+    code?: boolean;
+};
+export declare const PreviewText: ({ src, html, code }: TextProps) => JSX.Element;
+declare type EmbedProps = {
+    src: string;
+    name: string;
+    icon: string;
+    provider?: string;
+};
+export declare const PreviewEmbed: ({ src, name, icon, provider }: EmbedProps) => JSX.Element;
+declare type IconProps = {
+    children?: React.ReactNode;
+    src: string;
+    icon: string;
+    name: string;
+    provider?: string;
+    download?: boolean;
+    className?: string;
+};
+export declare const PreviewIcon: ({ children, src, icon, name, provider, download, className }: IconProps) => JSX.Element;
+declare type PreviewProps = {
+    src: string;
+    format: PreviewFormatType;
+    name: string;
+    icon: string;
+    width?: number;
+    height?: number;
+    mediaType?: string;
+    provider?: string;
+};
+export declare const Preview: ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
+export default Preview;

package/dist/esm/types/types/types.d.ts

@@ -118,6 +118,7 @@ declare type AttachmentType = {
     thumbnail_url: string;
     external_url: string;
 };
+declare type PreviewFormatType = "text" | "code" | "markup" | "image" | "video" | "audio" | "document" | "embed" | "link" | "download" | "none";
 declare type ReactionType = {
     id: number;
     parent: MessageType;

package/dist/esm/types/utils/fileUtilities.d.ts

@@ -1,5 +1,20 @@
 export declare const fileSizeAsString: (size: number) => string;
-export declare const getIcon: (name: string, mediaType?: string) => {
+export declare function getExtension(name: string): string;
+export declare function isAudio(ext: string): boolean;
+export declare function isImage(ext: string): boolean;
+export declare function isWebImage(path: string): boolean;
+export declare function isBitmap(path: string): boolean;
+export declare function isMetaFile(path: string): boolean;
+export declare function isVideo(ext: string): boolean;
+export declare function isMarkup(ext: string): boolean;
+export declare function isCode(ext: string): boolean;
+export declare function isText(ext: string): boolean;
+export declare function isOfficeDocument(path: string): boolean;
+export declare function canResize(path: string): boolean;
+export declare function canConvertToImage(filename: string): boolean;
+export declare function canConvertToPdf(filename: string): boolean;
+export declare function getIcon(name: string, mediaType?: string): {
     icon: string;
     color?: string;
 };
+export declare function getPreviewFormat(filename: string): PreviewFormatType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.2.0",
+  "version": "12.1.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -8,6 +8,7 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "./dist/cjs/types/index.d.ts",
+  "style": "dist/css/weavy-react.css",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -17,11 +18,13 @@
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/react-modal": "^3.13.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
     "rollup": "^2.72.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.53.0",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"
   },
@@ -30,10 +33,16 @@
     "react-dom": "^18.1.0"
   },
   "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c --watch"
+    "clean": "rimraf dist/*",
+    "build": "npm-run-all clean --parallel css js",
+    "css": "sass src/scss:dist/css --no-source-map",
+    "js": "rollup -c",
+    "watch": "npm-run-all clean --parallel watch-css watch-js",
+    "watch-css": "sass src/scss:dist/css --watch",
+    "watch-js": "rollup -c --watch"
   },
   "dependencies": {
+    "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
     "@microsoft/signalr": "^6.0.3",
     "classnames": "^2.3.1",
@@ -41,6 +50,7 @@
     "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "pdfjs-dist": "^2.14.305",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
   }

package/rollup.config.js

@@ -4,7 +4,6 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import { terser } from "rollup-plugin-terser";
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import del from 'rollup-plugin-delete';
 
 const packageJson = require("./package.json");
 
@@ -24,7 +23,6 @@ export default [
             },
         ],
         plugins: [
-            del({ targets: 'dist/*' }),
             peerDepsExternal(),
             resolve(),
             commonjs(),

package/src/components/Attachment.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Icon from "../ui/Icon";
 import { fileSizeAsString, getIcon } from "../utils/fileUtilities";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     previewFormat: string,
@@ -18,12 +17,12 @@ const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, siz
     let fileSize = size > 0 ? fileSizeAsString(size) : null;
     let { icon, color } = getIcon(name, mediaType)
     return (
-        <a href={previewUrl || url} className={wy('attachment')} target={"_blank"} title={name}>
-            <div className={wy('attachment-icon')} title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
-            <div className={wy('attachment-content')}>
-                <div className={wy('attachment-title')}>{name}</div>
+        <a href={previewUrl || url} className={'wy-attachment'} target={"_blank"} title={name}>
+            <div className={'wy-attachment-icon'} title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
+            <div className={'wy-attachment-content'}>
+                <div className={'wy-attachment-title'}>{name}</div>
                 {fileSize &&
-                    <div className={wy('attachment-meta')} title={fileSize}>{fileSize}</div>
+                    <div className={'wy-attachment-meta'} title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>

package/src/components/Avatar.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from 'classnames';
 import Presence from "./Presence";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     id?: number,
@@ -14,8 +13,8 @@ type Props = {
 
 const Avatar = ({ id, src, name, presence, size = 48, className }: Props) => {
     return (
-        <div className={classNames(wy('avatar-presence'), className)}>
-            <img alt="" title={name} className={wy('avatar')} height={size} width={size} src={src} />
+        <div className={classNames('wy-avatar-presence', className)}>
+            <img alt="" title={name} className="wy-avatar" height={size} width={size} src={src} />
             {presence && id &&
                 <Presence id={id} status={presence} />
             }

package/src/components/Chat.tsx

@@ -6,7 +6,6 @@ import Messages from './Messages';
 import useMembers from '../hooks/useMembers';
 import Typing from './Typing';
 import useConversation from '../hooks/useConversation';
-import { prefix as wy } from "../utils/styles";
 
 const Chat = ({ id }: ChatProps) => {
     const { client } = useContext(WeavyContext);
@@ -37,9 +36,9 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <div className={wy('messenger-conversation scroll-y')}>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+        <div className="wy-messenger-conversation wy-scroll-y">
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <div></div>
                     {selectedId && dataConversation &&
                         <div className="wy-appbar-text">

package/src/components/Conversation.tsx

@@ -13,7 +13,6 @@ import SearchUsers from './SearchUsers';
 import useMutateMembers from '../hooks/useMutateMembers';
 import useConversation from '../hooks/useConversation';
 import useMutateConversationName from '../hooks/useMutateConversationName';
-import { prefix as wy } from "../utils/styles";
 import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
@@ -21,7 +20,6 @@ import Messages from './Messages';
 
 const Conversation = ({ id, showBackButton }: ConversationProps) => {
 
-
     const queryClient = useQueryClient();
     const { client } = useContext(WeavyContext);
     const { selectedConversationId, setSelectedConversationId } = useContext(MessengerContext);
@@ -85,10 +83,6 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         setSelectedConversationId(null);
     }
 
-    
-
-
-
     // set selected conversation id if id is supplied to component
     useEffect(() => {
         if (id) {
@@ -117,13 +111,10 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         }
     }, [dataConversation]);
 
-
-
-
     return (
         <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <div>
                         {showBackButton &&
                             <Button.UI onClick={handleBack}><Icon.UI name="back" /></Button.UI>
@@ -131,7 +122,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                     {selectedConversationId && dataConversation &&
 
                         <>
-                            <div className='wy-appbar-text'>
+                            <div className="wy-appbar-text">
                                 <Typing id={selectedConversationId} context="conversation">
                                     {dataConversation.display_name}
                                 </Typing>
@@ -154,7 +145,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
             </header>
 
             {!selectedConversationId &&
-                <div className={wy('avatar-header')}>
+                <div className="wy-avatar-header">
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={256} />
                     <h2>Welcome {user.name}!</h2>
                     Create or select a conversation to get started
@@ -164,41 +155,41 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 <Messages id={selectedConversationId} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} />
             }
 
-            <Overlay.UI isOpen={modalAddOpen} className={wy('modal')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalAddOpen} className="wy-modal">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleAddModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>Add people</div>
+                        <div className="wy-appbar-text">Add people</div>
                     </nav>
                 </header>
                 <SearchUsers handleSubmit={handleAdd} buttonTitle="Add selected" />
             </Overlay.UI>
 
-            <Overlay.UI isOpen={modalDetailsOpen} className={wy('modal')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalDetailsOpen} className="wy-modal">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleDetailsModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>Conversation details</div>
+                        <div className="wy-appbar-text">Conversation details</div>
                     </nav>
                 </header>
                 <div>
-                    {dataConversation && <div className={wy('avatar-header')}><Avatar src={dataConversation?.avatar_url} name={title} size={128} /></div>}
+                    {dataConversation && <div className="wy-avatar-header"><Avatar src={dataConversation?.avatar_url} name={title} size={128} /></div>}
                     {dataConversation?.type !== ChatRoom &&
-                        <h4 className={wy('avatar-display-name')}>{dataConversation?.display_name}</h4>
+                        <h4 className="wy-avatar-display-name">{dataConversation?.display_name}</h4>
                     }
 
                     {dataConversation?.type === ChatRoom && (
                         <>
-                            <div className={wy('pane-group')}>
-                                <input className={wy('input')} value={title} onChange={(e) => handleUpdateTitle(e)} />
+                            <div className="wy-pane-group">
+                                <input className="wy-input" value={title} onChange={(e) => handleUpdateTitle(e)} />
                             </div>
-                            <div className={wy('pane-group')}>
-                                <table className={wy('search-result-table')}>
+                            <div className="wy-pane-group">
+                                <table className="wy-search-result-table">
                                     <tbody>
                                         {dataMembers?.data.map((m: MemberType) => {
                                             return (
-                                                <tr key={m.id} className={wy('search-result-table-checkbox')}>
-                                                    <td className={wy('search-result-table-icon')}><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
+                                                <tr key={m.id} className="wy-search-result-table-checkbox">
+                                                    <td className="wy-search-result-table-icon"><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
                                                     <td>{m.display_name}</td>
                                                     <td></td>
                                                 </tr>

package/src/components/ConversationBadge.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
 import useBadge from "../hooks/useBadge";
-import { prefix as wy } from "../utils/styles";
 
 const ConversationBadge = () => {
     const { client } = useContext(WeavyContext);
@@ -34,7 +33,7 @@ const ConversationBadge = () => {
     return (
         <>
             {!isLoading && badge > 0 &&
-                <span className={wy('badge badge-danger')}>{badge}</span>
+                <span className="wy-badge wy-badge-danger">{badge}</span>
             }
         </>
 

package/src/components/ConversationForm.tsx

@@ -11,8 +11,6 @@ import Meetings from './Meetings';
 import Meeting from './Meeting';
 import FileBrowser from './FileBrowser';
 import { getIcon } from '../utils/fileUtilities';
-import { prefix as wy } from "../utils/styles";
-
 
 type Props = {
     conversationId: number,
@@ -46,13 +44,10 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                 setAttachments([...attachments, attachment[0]]);
             }
         })
-
-
     }
 
     const { mutateAsync: uploadFile, isSuccess: uploadSuccess } = useFileUploader(handleUploaded);
 
-
     useEffect(() => {
         // set stored text and attachments if available
         let textValue: any = queryClient.getQueryData(["form-text", conversationId]) || "";
@@ -71,8 +66,6 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
         handleAutoGrow();
     }, [text])
 
-
-
     const handleInsertMessage = (e: React.KeyboardEvent<EventTarget>) => {
 
         if(e.type === 'keydown' && !(e.key === "Enter" && e.ctrlKey )) return;
@@ -159,7 +152,7 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
 
 
     return (
-        <form className={wy('message-form')}>
+        <form className="wy-message-form">
             {uploadError &&
                 <div>{uploadError}</div>
             }
@@ -169,12 +162,12 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                     {working &&
                         <div>Now uploading ({currentUploadCount} of {fileCount}) selected files</div>
                     }
-                    <div className={wy('picker-list')}>
+                    <div className="wy-picker-list">
                         {attachments.map((a: FileType) => {
                             let { icon } = getIcon(a.name);
                             return (
-                                <div key={a.id} className={wy('picker-list-item')}>
-                                    <File id={a.id} name={a.name} className={wy('picker-list-item-title')} icon={ icon } />
+                                <div key={a.id} className="wy-picker-list-item">
+                                    <File id={a.id} name={a.name} className="wy-picker-list-item-title" icon={ icon } />
                                     <Button.UI onClick={handleRemoveFile.bind(ConversationForm, a.id)}><Icon.UI name='close-circle' /></Button.UI>
                                 </div>
 
@@ -183,8 +176,8 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
 
                         {meetings.map((m: MeetingType) => {
                             return (
-                                <div key={m.id} className={wy('picker-list-item')}>
-                                    <Meeting id={m.id} title={m.provider} className={wy('picker-list-item-title')} />
+                                <div key={m.id} className="wy-picker-list-item">
+                                    <Meeting id={m.id} title={m.provider} className="wy-picker-list-item-title" />
                                     <Button.UI onClick={handleRemoveMeeting.bind(ConversationForm, m.id)}><Icon.UI name='close-circle' /></Button.UI>
                                 </div>
 
@@ -193,19 +186,19 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                     </div>
                 </div>
             }
-            <div className={wy('message-editor-inputs')}>
+            <div className="wy-message-editor-inputs">
 
-                <div className={wy('message-editor-buttons')}>
+                <div className="wy-message-editor-buttons">
                     <input type="file" ref={input => fileInput = input} value={files} onChange={handleFileUpload} multiple hidden tabIndex={-1} />
                     <Button.UI title="Upload attachment" onClick={openFileInput}><Icon.UI name="attachment" /></Button.UI>
                     <Meetings onMeetingAdded={handleAddMeeting} />
                     <FileBrowser onFileAdded={handleExternalFileAdded} />
                 </div>
 
-                <div className={wy('message-editor-text message-editor-grow')}>
-                    <textarea rows={1} ref={textInput} className={wy('message-editor-textfield message-editor-textcontent')}  value={text} onChange={handleChange} onKeyDown={handleInsertMessage} onKeyPress={useThrottle(handleKeyPress, 4000)}></textarea>
+                <div className="wy-message-editor-text wy-message-editor-grow">
+                    <textarea rows={1} ref={textInput} className="wy-message-editor-textfield wy-message-editor-textcontent"  value={text} onChange={handleChange} onKeyDown={handleInsertMessage} onKeyPress={useThrottle(handleKeyPress, 4000)}></textarea>
                 </div>
-                <div className={wy('message-editor-buttons')}>
+                <div className="wy-message-editor-buttons">
                     <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI name="send"/></Button.UI>
                 </div>
             </div>

package/src/components/ConversationList.tsx

@@ -5,7 +5,6 @@ import ConversationListItem from './ConversationListItem';
 import NewConversation from './NewConversation';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
 
 const ConversationList = () => {
     const { client } = useContext(WeavyContext);
@@ -40,19 +39,19 @@ const ConversationList = () => {
 
     return (
         <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={24} />
                     <div>Messenger</div>
                     <NewConversation />
                 </nav>
             </header>
-            <div className={wy('conversations')}>
+            <div className="wy-conversations">
                 {data && data.data?.map((item) =>
                     <ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
                 )}
 
-                {/* <a className={wy('pager')}><svg className={wy('spinner spin')} width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
+                {/* <a className="wy-pager"><svg className="wy-spinner wy-spin" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
             </div>
         </>
     )

package/src/components/ConversationListItem.tsx

@@ -13,8 +13,7 @@ import Typing from './Typing';
 import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
-
+import classNames from 'classnames';
 
 const ConversationListItem = ({ item, refetchConversations }: ConversationListItemProps) => {
 
@@ -79,25 +78,25 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     // }
 
     return (
-        <div className={wy('conversation' + (item.is_unread ? ' unread' : ''))} key={item.id}>
-            <a className={wy('conversation-link' + (selectedConversationId === item.id ? ' active': ''))} href="#" onClick={(e) => handleClick(e, item.id)}>
+        <div className={classNames('wy-conversation', {"wy-unread": item.is_unread})} key={item.id}>
+            <a className={classNames('wy-conversation-link', { "wy-active": selectedConversationId === item.id})} href="#" onClick={(e) => handleClick(e, item.id)}>
                 <Avatar src={item.avatar_url} id={otherId || -1} presence={item.type !== ChatRoom ? "away" : ""} name={item.display_name} />
 
-                <div className={wy('conversation-body')}>
-                    <div className={wy('conversation-header')}>
-                        <div className={wy('conversation-title')}>{item.display_name}</div>
+                <div className="wy-conversation-body">
+                    <div className="wy-conversation-header">
+                        <div className="wy-conversation-title">{item.display_name}</div>
                         {item.last_message &&
-                            <time className={wy('conversation-time')} dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
+                            <time className="wy-conversation-time" dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
                         }
                     </div>
-                    <div className={wy('conversation-summary')}>
+                    <div className="wy-conversation-summary">
                         <Typing id={item.id} context="listitem">
 
                             {item.last_message?.html &&
-                                <span className={wy('typing-hide')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
                             }
                             {!item.last_message?.html &&
-                                <span className={wy('typing-hide')}>
+                                <span className="wy-typing-hide">
                                     {item.last_message?.attachment_ids?.length > 0 &&
                                         <Icon.UI name="attachment" size={1} />
                                     }
@@ -112,7 +111,7 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
                 </div>
             </a>
 
-            <div className={wy('conversation-actions')}>
+            <div className="wy-conversation-actions">
                 {item.is_pinned &&
                     <Button.UI onClick={handleUnpin}>
                         <Icon.UI name="pin" size={.75} />
@@ -120,7 +119,6 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
                 }
 
-
                 <Dropdown.UI directionX='left'>
                     <>
                         {item.is_unread &&

package/src/components/FileBrowser.tsx

@@ -4,7 +4,6 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 import useMutateExternalBlobs from '../hooks/useMutateExternalBlobs';
 import { UserContext } from "../contexts/UserContext";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     onFileAdded: Function
@@ -60,7 +59,7 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             $filebrowserFrame.id = "weavy-filebrowser";
             $filebrowserFrame.name = "weavy-filebrowser";
             $filebrowserFrame.src = filebrowserSrc;
-            $filebrowserFrame.className = wy('filebrowser-frame');
+            $filebrowserFrame.className = "wy-filebrowser-frame";
             $filebrowserFrame.style.cssText = "position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
 
             window.top?.document.body.appendChild($filebrowserFrame);