From 48d880d3c8f8c43b55ca3d895d257646031345fa Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 13 Jul 2023 20:34:02 +0100
Subject: [PATCH] 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>
---
 .../topic-above-suggested/related-topics.hbs  |  2 +-
 .../topic-above-suggested/related-topics.js   | 29 ++++++++++---------
 .../common/semantic-related-topics.scss       |  3 ++
 plugin.rb                                     |  2 ++
 4 files changed, 21 insertions(+), 15 deletions(-)
 rename assets/javascripts/discourse/{templates => }/connectors/topic-above-suggested/related-topics.hbs (85%)
 create mode 100644 assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss

diff --git a/assets/javascripts/discourse/templates/connectors/topic-above-suggested/related-topics.hbs b/assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.hbs
similarity index 85%
rename from assets/javascripts/discourse/templates/connectors/topic-above-suggested/related-topics.hbs
rename to assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.hbs
index 282be2d7..d62a260c 100644
--- a/assets/javascripts/discourse/templates/connectors/topic-above-suggested/related-topics.hbs
+++ b/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>
diff --git a/assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.js b/assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.js
index 41f954dd..890e679c 100644
--- a/assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.js
+++ b/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)
+    );
+  }
+}
diff --git a/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss b/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss
new file mode 100644
index 00000000..b0ea526e
--- /dev/null
+++ b/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss
@@ -0,0 +1,3 @@
+.related-topics {
+  margin: 4.5em 0 1em;
+}
diff --git a/plugin.rb b/plugin.rb
index 0baa98e5..c748622a 100644
--- a/plugin.rb
+++ b/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