@weavy/uikit-react 11.0.1 → 12.1.0

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

@@ -1,5 +1,5 @@
 export default class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
     groups: string[];

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/contexts/MessengerContext.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 export declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props) => JSX.Element;
 export default MessengerProvider;

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

@@ -1 +1,2 @@
-export default function useUser(client: any): import("react-query").UseQueryResult<UserType, unknown>;
+import WeavyClient from "../client/WeavyClient";
+export default function useUser(client: WeavyClient): import("react-query").UseQueryResult<UserType, unknown>;

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

@@ -1,3 +1,2 @@
 export interface Messenger {
-    options?: MessengerContextOptions;
 }

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

@@ -1,29 +1,33 @@
 /// <reference types="react" />
+interface WeavyClient {
+    url: string;
+    tokenFactory: (() => string | Promise<string>);
+    subscribe: Function;
+    unsubscribe: Function;
+}
 declare type WeavyClientOptions = {
-    uri: string;
+    url: string;
     tokenFactory: (() => string | Promise<string>);
 };
 declare type WeavyContextProps = {
-    client: any;
+    client: WeavyClient | null;
     options?: WeavyContextOptions;
 };
 declare type WeavyContextOptions = {
     zoomAuthenticationUrl?: string;
     teamsAuthenticationUrl?: string;
     enableCloudFiles?: boolean;
+    enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    reactions?: string[];
 };
 declare type MessengerContextProps = {
-    options?: MessengerContextOptions;
     selectedConversationId: null | number;
     setSelectedConversationId: Function;
 };
 declare type UserContextProps = {
     user: UserType;
 };
-declare type MessengerContextOptions = {
-    reactions?: string[];
-};
 declare type PreviewContextProps = {
     openPreview: Function;
     closePreview: Function;
@@ -114,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/dist/index.d.ts

@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
 declare class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
     groups: string[];
@@ -31,9 +31,8 @@ declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Ele
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props$1) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props$1) => JSX.Element;
 
 declare const Messenger: FC<Messenger>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.0.1",
+  "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/client/WeavyClient.ts

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
-    uri;
+    url;
     tokenFactory;
     connection;
     groups: string[];
@@ -14,14 +14,14 @@ export default class WeavyClient {
     EVENT_RECONNECTED = "reconnected";
 
     constructor(options: WeavyClientOptions) {
-        this.uri = options.uri;
+        this.url = options.url;
         this.tokenFactory = options.tokenFactory
         this.groups = [];
         this.connectionEvents = [];
          
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
-            .withUrl(this.uri + "/hubs/rtm", {
+            .withUrl(this.url + "/hubs/rtm", {
                 accessTokenFactory: this.tokenFactory
             })
             .withAutomaticReconnect()

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,19 +36,16 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <>
-            <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>
-                                <Typing id={selectedId} context="conversation">
-                                    {dataConversation.display_name}
-                                </Typing>
-                            </div>
-                        </>
+                        <div className="wy-appbar-text">
+                            <Typing id={selectedId} context="conversation">
+                                {dataConversation.display_name}
+                            </Typing>
+                        </div>
                     }
                 </nav>
             </header>
@@ -61,7 +57,7 @@ const Chat = ({ id }: ChatProps) => {
             {selectedId && dataMembers &&
                 <Messages id={selectedId} members={dataMembers} />
             }
-        </>
+        </div>
     )
 }
 

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>
+                            <div className="wy-appbar-text">
                                 <Typing id={selectedConversationId} context="conversation">
                                     {dataConversation.display_name}
                                 </Typing>
@@ -154,51 +145,51 @@ 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>
-                    Select a conversation to get started
+                    Create or select a conversation to get started
                 </div>
             }
             {selectedConversationId && dataMembers &&
                 <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>