FIX: Rerender related topics correctly when topic changes (#100)

* FIX: Rerender related topics correctly when topic changes


Co-authored-by: Rafael dos Santos Silva <xfalcox@gmail.com>

assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.hbs

@@ -1,4 +1,4 @@
-<div>
+<div class="related-topics">
   <h3 id="related-topics-title" class="related-topics-title">
     {{i18n "discourse_ai.related_topics.title"}}
   </h3>

assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.js

@@ -1,15 +1,16 @@
-export default {
-  shouldRender(args) {
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class extends Component {
+  static shouldRender(args) {
     return (args.model.related_topics?.length || 0) > 0;
-  },
-  setupComponent(args, component) {
-    if (component.model.related_topics) {
-      component.set(
-        "relatedTopics",
-        component.model.related_topics.map((topic) =>
-          this.store.createRecord("topic", topic)
-        )
-      );
-    }
-  },
-};
+  }
+
+  @service store;
+
+  get relatedTopics() {
+    return this.args.outletArgs.model.related_topics.map((topic) =>
+      this.store.createRecord("topic", topic)
+    );
+  }
+}

assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss

@@ -0,0 +1,3 @@
+.related-topics {
+  margin: 4.5em 0 1em;
+}

plugin.rb

@@ -16,6 +16,8 @@ register_asset "stylesheets/modules/ai-helper/common/ai-helper.scss"
 
 register_asset "stylesheets/modules/ai-bot/common/bot-replies.scss"
 
+register_asset "stylesheets/modules/embeddings/common/semantic-related-topics.scss"
+
 module ::DiscourseAi
   PLUGIN_NAME = "discourse-ai"
 end