enhance youtube gift

src/App.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
     import { chats } from './chats';
     import { type TransitionConfig } from 'svelte/transition';
     import { quadOut as easing } from 'svelte/easing';
+    import CommentRenderer from './components/CommentRenderer.svelte';
 
     const child = new WeakMap<Node, number>();
     let container: HTMLDivElement;
@@ -35,14 +35,6 @@
             }
         };
     }
-
-    function authorColor(comment: Comment) {
-        if (comment.service === 'youtube') {
-            if (comment.data.isModerator) return 'text-blue-300';
-            if (comment.data.isMember) return 'text-green-300';
-        }
-        return 'text-zinc-200';
-    }
 </script>
 
 <div
@@ -50,57 +42,13 @@
     bind:this={container}
 >
     {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
-        {@const author = chat.data.displayName ?? chat.data.name}
-        <div class="flex flex-row gap-4 pt-3 pb-1 box-border origin-top-left" in:scrollEffect>
-            <div class="w-10 min-w-10 relative">
-                <img
-                    src={chat.data.originalProfileImage}
-                    alt={author}
-                    class="w-10 h-10 rounded-full absolute -top-3 bg-slate-200 border-2 border-slate-400 shadow"
-                />
-            </div>
-            <div
-                class="bubble shadow relative flex-grow flex flex-col gap-1 bg-slate-800 bg-opacity-95 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
-            >
-                <div class="text-xs font-bold gap-0.5 items-center {authorColor(chat)}">
-                    {author}
-                    {#each chat.data.badges as badge}
-                        <img
-                            class="h-3 w-3 inline-block mx-0.5"
-                            src={badge.url}
-                            alt={badge.label}
-                        />
-                    {/each}
-                </div>
-                <div class="comment-container">
-                    {@html chat.data.comment}
-                </div>
-            </div>
+        <div class="origin-top-left" in:scrollEffect>
+            <CommentRenderer comment={chat} />
         </div>
     {/each}
 </div>
 
 <style lang="postcss">
-    .comment-container {
-        :global(img) {
-            @apply mx-0.5 h-6 w-6;
-            display: inline-block;
-        }
-    }
-    .bubble {
-        &::before {
-            @apply -left-2 top-0 block h-2 w-2 bg-slate-800 bg-opacity-95;
-            content: ' ';
-            position: absolute;
-            mask-image: linear-gradient(
-                45deg,
-                rgba(0, 0, 0, 0) 0%,
-                rgba(0, 0, 0, 0) 50%,
-                rgba(0, 0, 0, 1) 50%,
-                rgba(0, 0, 0, 1) 100%
-            );
-        }
-    }
     .main {
         mask-image: linear-gradient(
             180deg,