Fix Hyvor comments hydration error and ensure reactions show without text

src/components/Hyvor.astro

@@ -8,9 +8,52 @@ const { pageId } = Astro.props;
 const computedPageId = pageId ?? Astro.url.pathname;
 ---
 
-<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
-<hyvor-talk-comments
-  website-id="15040"
-  page-id={computedPageId}
-  reactions-text=""
-></hyvor-talk-comments>
+<div class="hyvor-comments">
+  <script is:inline async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
+  <hyvor-talk-comments
+    website-id="15040"
+    page-id={computedPageId}
+    reactions-text=""
+    reactions-enabled="true"
+  ></hyvor-talk-comments>
+</div>
+
+<script is:inline>
+  // Prevent hydration errors by ensuring Hyvor only initializes once
+  if (typeof window !== 'undefined') {
+    window.HYVOR_TALK_CONFIG = window.HYVOR_TALK_CONFIG || {};
+  }
+  
+  // Hide the "What's your reaction?" text after Hyvor loads
+  function hideReactionText() {
+    document.querySelectorAll('.reactions-title').forEach(el => {
+      el.style.display = 'none';
+    });
+  }
+  
+  // Run multiple times after Hyvor loads
+  [500, 1000, 2000, 3000].forEach(delay => {
+    setTimeout(hideReactionText, delay);
+  });
+</script>
+
+<style is:inline>
+  /* Hide the "What's your reaction?" text but keep the emojis */
+  .reactions-title,
+  .hyvor-comments .reactions-title,
+  .hyvor-comments .hyvor-talk-reactions-heading,
+  .hyvor-comments [class*="reactions-heading"],
+  .hyvor-comments .ht-reactions-title,
+  .hyvor-comments .ht-rating-heading,
+  .hyvor-comments hyvor-talk-reactions [slot="heading"],
+  .hyvor-comments .ht-reactions-header,
+  .hyvor-comments .ht-reactions-section-title,
+  .ht-reactions-title,
+  .ht-rating-heading,
+  [class*="ht-reactions"] > [class*="title"],
+  [class*="ht-reactions"] > [class*="heading"],
+  .hyvor-talk-reactions-header,
+  .hyvor-talk-reactions-title {
+    display: none !important;
+  }
+</style>