Merge pull request #872 from The-Commit-Company/develop

Release v1.5.2

.github/FUNDING.yml

@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: [The-Commit-Company]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

mobile/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

mobile/src/components/common/EmojiPicker.tsx

@@ -2,12 +2,17 @@ import { createElement, useEffect, useRef } from "react"
 import 'emoji-picker-element'
 import './emojiPicker.styles.css'
 
+import { Database } from "emoji-picker-element";
+
+export const emojiDatabase = new Database();
+
 const EmojiPicker = ({ onSelect }: { onSelect: (emoji: string) => void }) => {
 
     const ref = useRef<any>(null)
 
     useEffect(() => {
         const handler = (event: any) => {
+            emojiDatabase.incrementFavoriteEmojiCount(event.detail.unicode)
             onSelect(event.detail.unicode)
         }
         ref.current?.addEventListener('emoji-click', handler)

mobile/src/components/features/chat-input/EmojiList.tsx

@@ -0,0 +1,94 @@
+import { Text } from '@radix-ui/themes'
+import { ReactRendererOptions } from '@tiptap/react'
+import { NativeEmoji } from 'emoji-picker-element/shared'
+import {
+    forwardRef, useEffect, useImperativeHandle,
+    useState,
+} from 'react'
+
+export default forwardRef((props: ReactRendererOptions['props'], ref) => {
+
+    const [selectedIndex, setSelectedIndex] = useState(0)
+
+    const selectItem = (index: number) => {
+        const item = props?.items[index]
+        if (item) {
+            props.command(item)
+        }
+    }
+
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props?.items.length - 1) % props?.items.length)
+    }
+
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props?.items.length)
+    }
+
+    const enterHandler = () => {
+        selectItem(selectedIndex)
+    }
+
+    useEffect(() => setSelectedIndex(0), [props?.items])
+
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+            if (event.key === 'ArrowUp') {
+                upHandler()
+                return true
+            }
+
+            if (event.key === 'ArrowDown') {
+                downHandler()
+                return true
+            }
+
+            if (event.key === 'Enter') {
+                enterHandler()
+                return true
+            }
+
+            return false
+        },
+    }))
+
+    if (props?.items.length) {
+        return (
+            <ul role="list"
+                data-is-toolbar-element={true}
+                className="divide-y w-full divide-gray-5 overflow-x-hidden bg-gray-2 border border-gray-5 shadow-lg list-none rounded-md overflow-y-scroll max-h-72">
+                {props.items.map((item: NativeEmoji, index: number) => (
+                    <EmojiItem
+                        item={item}
+                        index={index}
+                        selectItem={selectItem}
+                        selectedIndex={selectedIndex}
+                        key={item.name}
+                        itemsLength={props.items.length}
+                    />
+                ))
+
+                }
+            </ul>
+        )
+    } else {
+        return null
+    }
+})
+
+const EmojiItem = ({ item, index, selectItem, selectedIndex, itemsLength }: { itemsLength: number, selectedIndex: number, index: number, item: NativeEmoji, selectItem: (index: number) => void }) => {
+
+    const roundedTop = index === 0 ? ' rounded-t-md' : ''
+
+    const roundedBottom = index === itemsLength - 1 ? ' rounded-b-md' : ''
+
+    return <li
+        data-is-toolbar-element={true}
+        className={'py-2 px-3 w-[90vw] text-md  active:bg-gray-4 focus:bg-gray-4 focus-visible:bg-gray-4 hover:bg-gray-4' + roundedBottom + roundedTop}
+        onClick={() => selectItem(index)}
+    >
+        <Text as='span' weight='medium' size='2' data-is-toolbar-element={true}>
+            {item.unicode} {item.shortcodes?.[0] ?? item.annotation}
+        </Text>
+    </li>
+}

mobile/src/components/features/chat-input/EmojiSuggestion.tsx

@@ -0,0 +1,104 @@
+import { Node } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+import { ReactRenderer } from '@tiptap/react'
+import EmojiList from './EmojiList'
+import tippy from 'tippy.js';
+import { NativeEmoji } from 'emoji-picker-element/shared';
+import { PluginKey } from '@tiptap/pm/state';
+import { emojiDatabase } from '@/components/common/EmojiPicker';
+
+export const EmojiSuggestion = Node.create({
+    name: 'emoji',
+    group: 'inline',
+    pluginKey: new PluginKey('emojiSuggestion'),
+
+    inline: true,
+
+    selectable: false,
+
+    atom: true,
+
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: ':',
+                items: (query) => {
+                    if (query.query.length !== 0) {
+                        return emojiDatabase.getEmojiBySearchQuery(query.query.toLowerCase()).then((emojis) => {
+                            return emojis.slice(0, 10) as NativeEmoji[]
+                        });
+                    } else {
+                        return emojiDatabase.getTopFavoriteEmoji(10) as Promise<NativeEmoji[]>
+                    }
+
+
+                    return []
+                },
+                render: () => {
+                    let component: any;
+                    let popup: any;
+
+                    return {
+                        onStart: props => {
+                            component = new ReactRenderer(EmojiList, {
+                                props,
+                                editor: props.editor,
+                            })
+
+                            if (!props.clientRect) {
+                                return
+                            }
+
+                            popup = tippy('body' as any, {
+                                getReferenceClientRect: props.clientRect as any,
+                                appendTo: () => document.body,
+                                content: component.element,
+                                showOnCreate: true,
+                                interactive: true,
+                                trigger: 'manual',
+                                placement: 'bottom-start',
+                            })
+                        },
+
+                        onUpdate(props) {
+                            component.updateProps(props)
+
+                            if (!props.clientRect) {
+                                return
+                            }
+
+                            popup[0].setProps({
+                                getReferenceClientRect: props.clientRect,
+                            })
+                        },
+
+                        onKeyDown(props) {
+                            if (props.event.key === 'Escape') {
+                                popup[0].hide()
+
+                                return true
+                            }
+
+                            return component.ref?.onKeyDown(props)
+                        },
+
+                        onExit() {
+                            popup[0].destroy()
+                            component.destroy()
+                        },
+                    }
+                },
+                command: ({ editor, range, props }) => {
+                    // Replace the text from : to with the emoji node
+                    editor.chain().focus().deleteRange(range).insertContent(props.unicode).run()
+
+                    emojiDatabase.incrementFavoriteEmojiCount(props.unicode)
+
+                    window.getSelection()?.collapseToEnd()
+                },
+            }),
+        ]
+    },
+
+})

mobile/src/components/features/chat-input/Tiptap.tsx

@@ -21,13 +21,13 @@ import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
 import json from 'highlight.js/lib/languages/json'
 import python from 'highlight.js/lib/languages/python'
-import { BiSend, BiSolidSend } from 'react-icons/bi'
-import { AiOutlinePaperClip } from 'react-icons/ai';
+import { BiSolidSend } from 'react-icons/bi'
 import { IconButton } from '@radix-ui/themes'
 import { useKeyboardState } from '@ionic/react-hooks/keyboard';
 import MessageInputActions from './MessageInputActions'
 import { useClickAway } from '@uidotdev/usehooks'
 import { FiPlus } from 'react-icons/fi'
+import { EmojiSuggestion } from './EmojiSuggestion'
 
 const lowlight = createLowlight(common)
 
@@ -109,7 +109,7 @@ export const Tiptap = ({ onMessageSend, messageSending, defaultText = '', onPick
             },
             code: {
                 HTMLAttributes: {
-                    class: 'font-mono bg-slate-950 text-sm radius-md p-1 text-white'
+                    class: 'pt-0.5 px-1 pb-px bg-[var(--gray-a3)] dark:bg-[#0d0d0d] text-[var(--ruby-a11)] dark-[var(--accent-a3)] text text-xs font-mono rounded border border-gray-4 dark:border-gray-6'
                 }
             },
 
@@ -273,6 +273,7 @@ export const Tiptap = ({ onMessageSend, messageSending, defaultText = '', onPick
         Placeholder.configure({
             placeholder: 'Type a message...'
         }),
+        EmojiSuggestion
     ]
 
     const [focused, setFocused] = useState(false)