@weavy/uikit-react 11.0.0

package/src/components/ConversationBadge.tsx

@@ -0,0 +1,44 @@
+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);
+    const [badge, setBadge] = useState<number>(0);
+
+    if (!client) {
+        throw new Error('Weavy Badge component must be used within an WeavyProvider');
+    }
+
+    const { isLoading, data } = useBadge();
+
+    const handleBadge = (data: BadgeType) => {
+        setBadge(data.private + data.rooms);
+    }
+
+    useEffect(() => {
+        if(data){
+            setBadge(data.private + data.rooms);
+        }        
+    }, [data])
+
+    useEffect(() => {
+        client.subscribe(null, "conversation-badge", handleBadge);
+
+        return () => {
+            client.unsubscribe(null, "conversation-badge", handleBadge);
+        }
+    }, [])
+
+    return (
+        <>
+            {!isLoading && badge > 0 &&
+                <span className={wy('badge badge-danger')}>{badge}</span>
+            }
+        </>
+
+    )
+}
+
+export default ConversationBadge;

package/src/components/ConversationForm.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import useFileUploader from '../hooks/useFileUploader';
+import File from './File';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import useMutateTyping from '../hooks/useMutateTyping';
+import useThrottle from '../hooks/useThrottle';
+import { flushSync } from 'react-dom';
+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,
+    handleInsert: Function
+}
+
+let uploadedFiles: any[] = [];
+
+const ConversationForm = ({ conversationId, handleInsert }: Props) => {
+
+    const [text, setText] = useState<string>("");
+    const [files, setFiles] = useState<string>("");
+    const [fileCount, setFileCount] = useState<number>(0);
+    const [currentUploadCount, setCurrentUploadCount] = useState<number>(1);
+    const [working, setWorking] = useState<boolean>(false);
+    const queryClient = useQueryClient();
+    const [attachments, setAttachments] = useState<FileType[]>([]);
+    const [meetings, setMeetings] = useState<MeetingType[]>([]);
+    const [uploadError, setUploadError] = useState<string | boolean>(false);
+    const startTyping = useMutateTyping();
+    const textInput = useRef<HTMLTextAreaElement>(null);
+
+    let fileInput: HTMLInputElement | null;
+
+    const handleUploaded = (attachment: any) => {
+        // update attachment list        
+        flushSync(() => {
+            if (attachment.status && attachment.status !== 200) {
+                setUploadError(attachment.detail);
+            } else {
+                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]) || "";
+        setText(textValue);
+        
+        let attachmentValue: any = queryClient.getQueryData(["form-attachments", conversationId]) || [];
+        setAttachments(attachmentValue);
+    }, [conversationId]);
+
+    useEffect(() => {
+        // store attachments
+        queryClient.setQueryData(["form-attachments", conversationId], attachments);
+    }, [attachments]);
+
+    useEffect(() => {
+        handleAutoGrow();
+    }, [text])
+
+
+
+    const handleInsertMessage = (e: React.KeyboardEvent<EventTarget>) => {
+
+        if(e.type === 'keydown' && !(e.key === "Enter" && e.ctrlKey )) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        
+        if (text === "" && attachments.length === 0 && meetings.length === 0) return;
+
+        handleInsert(text, attachments, meetings);
+        setText("");
+        setFiles("");
+        setAttachments([]);
+        setMeetings([]);
+        
+        // clear stored text and attachments
+        queryClient.setQueryData(["form-text", conversationId], "");
+        queryClient.setQueryData(["form-attachments", conversationId], []);
+    }
+
+    const handleChange = (e: any) => {
+
+        // store text
+        queryClient.setQueryData(["form-text", conversationId], e.target.value);
+
+        // set text  value
+        setText(e.target.value);
+        
+    }
+
+    const handleFileUpload = async (e: any) => {
+        setUploadError(false);
+        setFiles(e.target.value);
+        setFileCount(e.target.files.length);
+        setWorking(true);
+
+        for (var i = 0; i < e.target.files.length; i++) {
+            setCurrentUploadCount(i + 1);
+            const file = e.target.files[i];
+            await uploadFile({ request: { file } });
+        }
+
+        setWorking(false)
+    }
+
+    const handleRemoveFile = (id: number, e: any) => {
+        setFiles("");
+        setAttachments(attachments.filter((a: FileType) => {
+            return a.id !== id
+        }));
+    }
+
+    const handleKeyPress = () => {
+        startTyping.mutate({ id: conversationId });
+    }
+
+    const openFileInput = (e: any) => {
+        fileInput?.click();
+    }
+
+    const handleAddMeeting = (data: any) => {
+        if (meetings.length > 0) return;
+
+        setMeetings([...meetings, data]);
+    }
+
+    const handleExternalFileAdded = (blobs: FileType[]) => {
+        setAttachments([...attachments, ...blobs]);
+    }
+
+    const handleRemoveMeeting = (id: number, e: any) => {
+        setMeetings(meetings.filter((a: MeetingType) => {
+            return a.id !== id
+        }));
+    }
+
+    const handleAutoGrow = () => {
+        if(textInput.current && textInput.current.parentNode){
+            const parent = textInput.current.parentNode as HTMLElement;            
+            parent.dataset.replicatedValue = textInput.current.value;
+        }
+        
+    }
+
+
+    return (
+        <form className={wy('message-form')}>
+            {uploadError &&
+                <div>{uploadError}</div>
+            }
+
+            {(working || attachments.length > 0 || meetings.length > 0) &&
+                <div>
+                    {working &&
+                        <div>Now uploading ({currentUploadCount} of {fileCount}) selected files</div>
+                    }
+                    <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 } />
+                                    <Button.UI onClick={handleRemoveFile.bind(ConversationForm, a.id)}><Icon.UI name='close-circle' /></Button.UI>
+                                </div>
+
+                            )
+                        })}
+
+                        {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')} />
+                                    <Button.UI onClick={handleRemoveMeeting.bind(ConversationForm, m.id)}><Icon.UI name='close-circle' /></Button.UI>
+                                </div>
+
+                            )
+                        })}
+                    </div>
+                </div>
+            }
+            <div className={wy('message-editor-inputs')}>
+
+                <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>
+                <div className={wy('message-editor-buttons')}>
+                    <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI name="send"/></Button.UI>
+                </div>
+            </div>
+        </form>
+
+    )
+}
+
+export default ConversationForm;

package/src/components/ConversationList.tsx

@@ -0,0 +1,61 @@
+import React, { useContext, useEffect } from 'react';
+import { WeavyContext } from '../contexts/WeavyContext';
+import useConversations from '../hooks/useConversations';
+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);
+    const { user } = useContext(UserContext);
+    const { data, isLoading, refetch } = useConversations();
+
+    if (!client) {
+        throw new Error('Weavy ConversationList component must be used within an WeavyProvider');
+    }
+
+    useEffect(() => {
+
+        client.subscribe(null, "app-inserted", handleAppInserted);
+        client.subscribe(null, "member-added", handleAppInserted);
+
+        return () => {
+            client.unsubscribe(null, "app-inserted", handleAppInserted);
+            client.unsubscribe(null, "member-added", handleAppInserted);
+        }
+    }, []);
+
+    const handleAppInserted = (data: ConversationType) => {
+        refetch();
+    }
+
+
+    if (isLoading) {
+        return (
+            <div>Loading Conversation list...</div>
+        )
+    }
+
+    return (
+        <>
+            <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')}>
+                {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> */}
+            </div>
+        </>
+    )
+}
+
+export default ConversationList;

package/src/components/ConversationListItem.tsx

@@ -0,0 +1,155 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import joypixels from 'emoji-toolkit';
+import dayjs from 'dayjs';
+import { MessengerContext } from '../contexts/MessengerContext';
+import { WeavyContext } from '../contexts/WeavyContext';
+import useMutatePinned from '../hooks/useMutatePinned';
+import useMutateRead from '../hooks/useMutateRead';
+import { ConversationListItemProps } from '../types/ConversationListItem';
+import Dropdown from '../ui/Dropdown';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+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";
+
+
+const ConversationListItem = ({ item, refetchConversations }: ConversationListItemProps) => {
+
+    const { client } = useContext(WeavyContext);
+    const { setSelectedConversationId, selectedConversationId } = useContext(MessengerContext);
+    const { user } = useContext(UserContext);
+    const readMutation = useMutateRead();
+    const pinMutation = useMutatePinned();
+    const removeMembers = useMutateRemoveMembers();
+    const date = dayjs.utc(item.last_message?.created_at).tz(dayjs.tz.guess());
+
+    const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
+
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, id: any) => {
+        e.preventDefault();
+        setSelectedConversationId(id);
+    }
+
+    const handleAppUpdated = useCallback((data: ConversationType) => {
+        if (data.id !== item.id) return;
+        refetchConversations();
+
+    }, [item.id])
+
+    useEffect(() => {
+        client.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+
+        return () => {
+            client.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+        }
+    }, [item.id])
+
+    const otherId = item.type !== ChatRoom ? item.member_ids.find((i) => { return i != user.id }) : null;
+
+    const handleUnread = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        readMutation.mutate({ id: item.id, read: false });
+    }
+
+    const handleRead = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        readMutation.mutate({ id: item.id, read: true });
+    }
+
+    const handlePin = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        pinMutation.mutate({ id: item.id, pin: true });
+    }
+
+    const handleUnpin = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        pinMutation.mutate({ id: item.id, pin: false });
+    }
+
+    const handleLeaveConversation = () => {
+        removeMembers.mutate({ id: item.id, members: [user.id] });
+    }
+
+    // const handleStar = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    //     e.preventDefault();
+    //     console.log("Star: ", item.id)
+    // }
+
+    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)}>
+                <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>
+                        {item.last_message &&
+                            <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')}>
+                        <Typing id={item.id} context="listitem">
+
+                            {item.last_message?.html &&
+                                <span className={wy('typing-hide')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                            }
+                            {!item.last_message?.html &&
+                                <span className={wy('typing-hide')}>
+                                    {item.last_message?.attachment_ids?.length > 0 &&
+                                        <Icon.UI name="attachment" size={1} />
+                                    }
+                                    {item.last_message?.meeting_id &&
+                                        <Icon.UI name="zoom" size={1} />
+                                    }
+                                </span>
+                            }
+
+                        </Typing>
+                    </div>
+                </div>
+            </a>
+
+            <div className={wy('conversation-actions')}>
+                {item.is_pinned &&
+                    <Button.UI onClick={handleUnpin}>
+                        <Icon.UI name="pin" size={.75} />
+                    </Button.UI>
+
+                }
+
+
+                <Dropdown.UI directionX='left'>
+                    <>
+                        {item.is_unread &&
+                            <Dropdown.Item onClick={handleRead}>Mark as read</Dropdown.Item>
+                        }
+                        {!item.is_unread &&
+                            <Dropdown.Item onClick={handleUnread}>Mark as unread</Dropdown.Item>
+                        }
+                    </>
+                    <>
+                        {item.is_pinned &&
+                            <Dropdown.Item onClick={handleUnpin}>Unpin</Dropdown.Item>
+                        }
+                        {!item.is_pinned &&
+                            <Dropdown.Item onClick={handlePin}>Pin</Dropdown.Item>
+                        }
+                    </>
+                    {item.type === ChatRoom &&
+                        <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
+                    }
+
+                    {/* <li><Button.UI onClick={handleStar}>Star</Button.UI></li> */}
+                </Dropdown.UI>
+
+
+
+            </div>
+        </div>
+    )
+}
+
+export default ConversationListItem;

package/src/components/File.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Icon from "../ui/Icon";
+
+type Props = {
+    id: number,
+    name: string
+    className?: string,
+    icon: string
+}
+const File = ({ id, name, className, icon }: Props) => {
+
+    return (
+        <>
+            <Icon.UI name={icon} size={1} />
+            <div className={className}>{name}</div>
+            <input type="hidden" value={id} name="blob"/>
+        </>
+    )
+}
+
+export default File;

package/src/components/FileBrowser.tsx

@@ -0,0 +1,86 @@
+import React, { useContext, useEffect } from "react";
+import { WeavyContext } from "../contexts/WeavyContext";
+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
+}
+
+const FileBrowser = ({ onFileAdded }: Props) => {
+
+    const { options } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+
+    const addExternalBlobs = useMutateExternalBlobs();
+
+    useEffect(() => {
+        window.addEventListener("message", handleFilebrowserMessage);
+
+
+        return () => {
+            window.removeEventListener("message", handleFilebrowserMessage);
+        }
+    }, []);
+
+    const handleFilebrowserMessage = async (e: any) => {
+        const messageData = e.data;
+
+        switch (messageData.name) {
+            case "addExternalBlobs":
+                var result = await addExternalBlobs.mutateAsync({ blobs: messageData.blobs });
+                onFileAdded(result);
+                closeFilebrowser();
+                break;
+            case "file-browser-close":
+                closeFilebrowser();
+                break;
+        }
+    }
+
+    const closeFilebrowser = () => {
+        let fb = document.getElementById("weavy-filebrowser");
+        if (fb) {
+            fb.style.display = "none";
+        }
+    }
+
+    const openFilebrowser = () => {
+        let fb = document.getElementById("weavy-filebrowser");
+
+        if (!fb) {
+            const origin = window.top?.document.location.origin;
+            const fileBrowserUrl = options?.filebrowserUrl;
+            const filebrowserSrc = fileBrowserUrl + "?origin=" + origin + "&v=X&t=" + Date.now().toString() + "&weavyId=-1";
+
+            let $filebrowserFrame = document.createElement("iframe");
+            $filebrowserFrame.id = "weavy-filebrowser";
+            $filebrowserFrame.name = "weavy-filebrowser";
+            $filebrowserFrame.src = filebrowserSrc;
+            $filebrowserFrame.className = wy('filebrowser-frame');
+            $filebrowserFrame.style.cssText = "position: absolute; 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);
+
+            $filebrowserFrame.addEventListener('load', () => {
+                $filebrowserFrame.style.display = "block";
+            });
+
+        } else {
+            fb.style.display = "block";
+        }
+    }
+
+    return (
+        <>
+            {options?.enableCloudFiles && 
+                <Button.UI onClick={openFilebrowser} title="Add file from cloud"><Icon.UI name="cloud" /></Button.UI>
+            }            
+        </>
+    )
+}
+
+export default FileBrowser;

package/src/components/Image.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { prefix as wy } from "../utils/styles";
+
+type ImageProps = {
+    src: string,
+    previewSrc: string,
+    width: number
+    height: number,
+    more?: number,
+    onClick: (e: any) => void
+}
+
+export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProps) => {
+    let ratio = width / height;
+    let baseSize = 64;
+    let maxScale = 2;
+    let flexRatio = ratio.toPrecision(5);
+    let flexBasis = (ratio * baseSize).toPrecision(5) + "px";
+    let padding = (100 / ratio).toPrecision(5) + "%"
+    let intrinsicWidth = width + "px"
+    let maxWidth = (maxScale * width) + "px";
+
+    return (
+        <a href={src} className={wy('image')} onClick={(e) => onClick(e)} style={{
+            flexBasis: flexBasis,
+            flexGrow: flexRatio,
+            flexShrink: flexRatio,
+            width: intrinsicWidth,
+            maxWidth: maxWidth
+        }}>
+            <div className={wy('image-area')} style={{ paddingBottom: padding}}>
+                <img src={previewSrc} alt="" loading="lazy" decoding="async" />
+                {!!more && <span className={wy('more')}>+{more}</span>}
+            </div>
+        </a>
+    );
+}
+
+type ImageGridProps = {
+    children: React.ReactNode,
+    limit?: number
+}
+
+export const ImageGrid = ({ children, limit = 3}: ImageGridProps) => {
+
+    let allImages = React.Children.toArray(children);
+
+    let more = allImages.length > limit ? allImages.length - limit : 0;
+
+    let firstImages = allImages.slice(0, limit);
+
+    let lastChild = firstImages[firstImages.length - 1];
+
+    if (React.isValidElement(lastChild)) {
+        // Set more property on last image    
+        firstImages[firstImages.length - 1] = React.cloneElement(lastChild, { more });
+    }
+
+    return (        
+        <div className={wy('image-grid')}>
+            {firstImages}
+        </div>        
+    );
+}
+
+export default Image;

package/src/components/Meeting.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Icon from '../ui/Icon';
+
+type Props = {
+    id: number,
+    title: string
+    className?: string
+}
+const Meeting = ({ id, title, className }: Props) => {
+
+    return (
+        <>
+            {/* <div className={className}>{title}</div> */}
+            <Icon.UI name="zoom" />
+            <div className={className}>Zoom meeting</div>
+            <input type="hidden" value={id} name="meeting"/>
+        </>
+    )
+}
+
+export default Meeting;