feat: beat gpty at it's game

apps/client/src/lib/components/ChatArea.svelte

@@ -64,6 +64,16 @@
 
         chatArea.scrollTo({top: chatArea.scrollHeight, behavior: "smooth"});
     }
+
+    function handleEmoteClick(ev: CustomEvent) {
+        if (!messageInputEl || !ev.detail) {
+            console.error("Missing message input or emote detail");
+            return;
+        }
+
+        const {name} = ev.detail;
+        messageInputEl.value += `:${name}:`;
+    }
 </script>
 
 <svelte:window on:keydown={handleKeydown}/>
@@ -88,6 +98,6 @@
             </label>
         </form>
 
-        <EmoteActions/>
+        <EmoteActions on:change={handleEmoteClick}/>
     </div>
 </div>

apps/client/src/lib/components/EmoteActions.svelte

@@ -1,7 +1,13 @@
-
 <script lang="ts">
     import {Sticker, Meh} from "lucide-svelte";
     import {type PopupSettings, popup} from "@skeletonlabs/skeleton";
+    import {getEmoteStore} from "$lib/store";
+    import {createEventDispatcher} from "svelte";
+
+    type EmoteButton = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement; }
+
+    const emotes = getEmoteStore();
+    const dispatch = createEventDispatcher();
 
     const popupGifOptions: PopupSettings = {
         target: 'popupGifSettings',
@@ -13,7 +19,13 @@
         target: 'popupEmoteSettings',
         event: 'click',
         placement: 'top-end',
+        closeQuery: null
     };
+
+    function changeState(e: EmoteButton) {
+        const target = e.currentTarget as HTMLButtonElement;
+        dispatch('change', target.dataset);
+    }
 </script>
 
 <div class="flex justify-around gap-x-2">
@@ -33,9 +45,14 @@
     </div>
 
     <div class="card p-4 w-72 h-96 shadow-xl" data-popup="popupEmoteSettings">
-        <div>
-            Emotes
+        <div class="space-y-1 space-x-2">
+            {#each Object.keys($emotes) as key ($emotes[key].id)}
+                <button class="w-8 h-8" on:click={changeState} type="button" data-emote-id="{$emotes[key].id}"
+                        data-name="{$emotes[key].name}">
+                    <img src="{$emotes[key].files.small.url}" alt="{$emotes[key].name}">
+                </button>
+            {/each}
         </div>
         <div class="arrow bg-surface-100-800-token"/>
     </div>
-</div>
+</div>

apps/client/src/lib/emote-parser.ts

@@ -3,6 +3,7 @@ import {fetchSevenTVEmotes} from "$lib/seven-tv-adapter";
 export type EmoteSet = Record<string, Emote>;
 
 export type Emote = {
+    id: string;
     name: string;
     host: string;
     files: Record<Sizes, EmoteFile>;
@@ -23,7 +24,7 @@ const sizes = {
 } as const;
 
 export function parseMessage(emotes: EmoteSet, message: string) {
-    const emoteRegex = /:(.*):/g;
+    const emoteRegex = /:(.*?):/gm;
     const emoteMatches = message.matchAll(emoteRegex);
     let parsedMessage = message;
 
@@ -40,6 +41,5 @@ export function parseMessage(emotes: EmoteSet, message: string) {
 
 export async function fetchEmotes() {
     const emotes = await fetchSevenTVEmotes();
-    console.log()
     return emotes;
 }

apps/client/src/lib/seven-tv-adapter.ts

@@ -5,6 +5,7 @@ type SevenTvEmoteSetResponse = {
 }
 
 type SevenTvEmoteSet = {
+    id: string;
     name: string;
     data: {
         host: {
@@ -44,6 +45,7 @@ export async function fetchSevenTVEmotes() {
         }, {} as Record<Sizes, EmoteFile>);
 
         acc[emote.name] = {
+            id: emote.id,
             name: emote.name,
             host: emote.data.host.url,
             files

apps/client/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
     const emoteStore = getEmoteStore();
 
     async function init() {
-        const emotes = await fetchEmotes() as any;
+        const emotes = await fetchEmotes();
         emoteStore.set(emotes);
     }
 </script>