FWIW, ich habe mit GPT-4 an diesem Beitrag gearbeitet (mit einigen kleinen Änderungen)
Discourse AI Bot: Neue Teilungsfunktion
KI
sam:
Gegeben:
commit 933784a873c781816857699d6d9138baf9f5a7de
Author: Sam <sam.saffron@gmail.com>
Date: Fri Dec 29 19:47:47 2023 +1100
FEATURE: allow easy sharing of bot conversations (#385)
* FEATURE: allow easy sharing of bot conversations
* Lean on new core API i
* Added system spec for copy functionality
* Update assets/javascripts/initializers/ai-bot-replies.js
Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
* discourse later insted of setTimeout
* Update spec/system/ai_bot/share_spec.rb
Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
* feedback from review
just check the whole payload
* remove uneeded code
* fix spec
---------
Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
diff --git a/assets/javascripts/discourse/components/modal/share-modal.gjs b/assets/javascripts/discourse/components/modal/share-modal.gjs
new file mode 100644
index 0000000..b122f62
--- /dev/null
+++ b/assets/javascripts/discourse/components/modal/share-modal.gjs
@@ -0,0 +1,109 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import discourseLater from "discourse-common/lib/later";
+import I18n from "I18n";
+import copyConversation from "../../lib/copy-conversation";
+
+const t = I18n.t.bind(I18n);
+
+export default class ShareModal extends Component {
+ @tracked contextValue = 1;
+ @tracked htmlContext = "";
+ @tracked maxContext = 0;
+ @tracked allPosts = [];
+ @tracked justCopiedText = "";
+
+ constructor() {
+ super(...arguments);
+
+ const postStream = this.args.model.topic.get("postStream");
+
+ let postNumbers = [];
+ // einfacher zu verstehen als Array.from
+ for (let i = 1; i <= this.args.model.post_number; i++) {
+ postNumbers.push(i);
+ }
+
+ this.allPosts = postNumbers
+ .map((postNumber) => {
+ let postId = postStream.findPostIdForPostNumber(postNumber);
+ if (postId) {
+ return postStream.findLoadedPost(postId);
+ }
+ })
+ .filter((post) => post);
+
+ this.maxContext = this.allPosts.length / 2;
+ this.contextValue = 1;
+
+ this.updateHtmlContext();
+ }
+
+ @action
+ updateHtmlContext() {
+ let context = [];
+
+ const start = this.allPosts.length - this.contextValue * 2;
+ for (let i = start; i < this.allPosts.length; i++) {
+ const post = this.allPosts[i];
+ context.push(`<p><b>${post.username}:</b></p>`);
+ context.push(post.cooked);
+ }
+ this.htmlContext = htmlSafe(context.join("\n"));
+ }
+
+ @action
+ async copyContext() {
+ const from =
+ this.allPosts[this.allPosts.length - this.contextValue * 2].post_number;
+ const to = this.args.model.post_number;
+ await copyConversation(this.args.model.topic, from, to);
+ this.justCopiedText = t("discourse_ai.ai_bot.conversation_shared");
+ discourseLater(() => {
+ this.justCopiedText = "";
+ }, 2000);
+ }
+
+ <template>
+ <DModal
+ class="ai-share-modal"
+ @title={{t "discourse_ai.ai_bot.share_modal.title"}}
+ @closeModal={{@closeModal}}
+ >
+ <:body>
+ <div class="ai-share-modal__preview">
+ {{this.htmlContext}}
+ </div>
+ </:body>
+
+ <:footer>
+ <div class="ai-share-modal__slider">
+ <Input
+ @type="range"
+ min="1"
+ max={{this.maxContext}}
+ @value={{this.contextValue}}
+ {{on "change" this.updateHtmlContext}}
+ />
+ <div class="ai-share-modal__context">
+ {{t "discourse_ai.ai_bot.share_modal.context"}}
+ {{this.contextValue}}
+ </div>
+ </div>
+ <DButton
+ class="btn-primary confirm"
+ @icon="copy"
+ @action={{this.copyContext}}
+ @label="discourse_ai.ai_bot.share_modal.copy"
+ />
+ <span class="ai-share-modal__just-copied">{{this.justCopiedText}}</span>
+ </:footer>
+ </DModal>
+ </template>
+}
diff --git a/assets/javascripts/discourse/lib/copy-conversation.js b/assets/javascripts/discourse/lib/copy-conversation.js
new file mode 100644
index 0000000..bcf3188
--- /dev/null
+++ b/assets/javascripts/discourse/lib/copy-conversation.js
@@ -0,0 +1,55 @@
+import { ajax } from "discourse/lib/ajax";
+import { clipboardCopy } from "discourse/lib/utilities";
+import I18n from "discourse-i18n";
+
+export default async function (topic, fromPostNumber, toPostNumber) {
+ const stream = topic.get("postStream");
+
+ let postNumbers = [];
+ // einfacher zu verstehen als Array.from
+ for (let i = fromPostNumber; i <= toPostNumber; i++) {
+ postNumbers.push(i);
+ }
+
+ const postIds = postNumbers.map((postNumber) => {
+ return stream.findPostIdForPostNumber(postNumber);
+ });
+
+ // wir benötigen raw zur Konstruktion, daher hilft der Post-Stream nicht
+
+ const url = `/t/${topic.id}/posts.json`;
+ const data = {
+ post_ids: postIds,
+ include_raw: true,
+ };
+
+ const response = await ajax(url, { data });
+
+ let buffer = [];
+ buffer.push("<details class='ai-quote'>");
+ buffer.push("<summary>");
+ buffer.push(`<span>${topic.title}</span>`);
+ buffer.push(
+ `<span title='${I18n.t("discourse_ai.ai_bot.ai_title")}'>${I18n.t(
+ "discourse_ai.ai_bot.ai_label"
+ )}</span>`
+ );
+ buffer.push("</summary>");
+
+ response.post_stream.posts.forEach((post) => {
+ buffer.push("");
+ buffer.push(`**${post.username}:**`);
+ buffer.push("");
+ buffer.push(post.raw);
+ });
+
+ buffer.push("</details>");
+
+ const text = buffer.join("\n");
+
+ if (window.discourseAiTestClipboard) {
+ window.discourseAiClipboard = text;
+ }
+
+ await clipboardCopy(text);
+}
diff --git a/assets/javascripts/initializers/ai-bot-replies.js b/assets/javascripts/initializers/ai-bot-replies.js
index e136963..050e1ed 100644
--- a/assets/javascripts/initializers/ai-bot-replies.js
+++ b/assets/javascripts/initializers/ai-bot-replies.js
@@ -6,6 +6,10 @@ import { withPluginApi } from "discourse/lib/plugin-api";
import { cook } from "discourse/lib/text";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
import { composeAiBotMessage } from "discourse/plugins/discourse-ai/discourse/lib/ai-bot-helper";
+import ShareModal from "../discourse/components/modal/share-modal";
+import copyConversation from "../discourse/lib/copy-conversation";
+
+const AUTO_COPY_THRESHOLD = 4;
function isGPTBot(user) {
return user && [-110, -111, -112, -113].includes(user.id);
@@ -166,6 +170,43 @@ function initializePersonaDecorator(api) {
);
}
+function initializeShareButton(api) {
+ const currentUser = api.getCurrentUser();
+ if (!currentUser || !currentUser.ai_enabled_chat_bots) {
+ return;
+ }
+
+ let shareAiResponse = async function ({ post, showFeedback }) {
+ if (post.post_number <= AUTO_COPY_THRESHOLD) {
+ await copyConversation(post.topic, 1, post.post_number);
+ showFeedback("discourse_ai.ai_bot.conversation_shared");
+ } else {
+ modal.show(ShareModal, { model: post });
+ }
+ };
+
+ api.addPostMenuButton("share", (post) => {
+ // sehr hackig und hässlich, aber es gibt kein `.topic` in attrs
+ if (
+ !currentUser.ai_enabled_chat_bots.any(
+ (bot) => post.username === bot.username
+ )
+ ) {
+ return;
+ }
+
+ return {
+ action: shareAiResponse,
+ icon: "share",
+ className: "post-action-menu__share",
+ title: "discourse_ai.ai_bot.share",
+ position: "first",
+ };
+ });
+
+ const modal = api.container.lookup("service:modal");
+}
+
export default {
name: "discourse-ai-bot-replies",
@@ -179,6 +220,7 @@ export default {
}
withPluginApi("1.6.0", initializeAIBotReplies);
withPluginApi("1.6.0", initializePersonaDecorator);
+ withPluginApi("1.22.0", (api) => initializeShareButton(api, container));
}
},
};
diff --git a/assets/javascripts/lib/discourse-markdown/ai-tags.js b/assets/javascripts/lib/discourse-markdown/ai-tags.js
new file mode 100644
index 0000000..c2d9b67
--- /dev/null
+++ b/assets/javascripts/lib/discourse-markdown/ai-tags.js
@@ -0,0 +1,3 @@
+export function setup(helper) {
+ helper.allowList(["details[class=ai-quote]"]);
+}
diff --git a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss b/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
index 4943b9b..2a8ba80 100644
--- a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
+++ b/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
@@ -67,3 +67,37 @@ article.streaming nav.post-controls .actions button.cancel-streaming {
font-size: var(--font-down-1);
padding-top: 3px;
}
+
+details.ai-quote {
+ > summary {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ span:first-child {
+ margin-right: auto;
+ }
+ span:nth-child(2) {
+ font-size: var(--font-down-2);
+ background: var(--primary-medium);
+ padding: 2px 6px 0;
+ color: var(--secondary);
+ }
+ }
+}
+
+.ai-share-modal {
+ .d-modal__footer {
+ position: relative;
+ padding: 10px 20px 25px;
+ .btn-primary {
+ margin-left: auto;
+ }
+ }
+ &__just-copied {
+ position: absolute;
+ font-size: var(--font-down-1);
+ right: 20px;
+ bottom: 5px;
+ color: var(--success);
+ }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e13f953..e2f2e7d 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -180,6 +180,16 @@ en:
cancel_streaming: "Stop reply"
default_pm_prefix: "[Untitled AI bot PM]"
shortcut_title: "Start a PM with an AI bot"
+ share: "Share AI conversation"
+ conversation_shared: "Conversation copied to clipboard"
+
+ ai_label: "AI"
+ ai_title: "Conversation with AI"
+
+ share_modal:
+ title: "Share AI conversation"
+ copy: "Copy"
+ context: "Interactions to share:"
bot_names:
gpt-4: "GPT-4"
diff --git a/spec/system/ai_bot/share_spec.rb b/spec/system/ai_bot/share_spec.rb
new file mode 100644
index 0000000..708e96b
--- /dev/null
+++ b/spec/system/ai_bot/share_spec.rb
@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+RSpec.describe "Share conversation", type: :system do
+ fab!(:admin) { Fabricate(:admin, username: "ai_sharer") }
+ let(:bot_user) { User.find(DiscourseAi::AiBot::EntryPoint::GPT4_ID) }
+
+ let(:pm) do
+ Fabricate(
+ :private_message_topic,
+ title: "This is my special PM",
+ user: admin,
+ topic_allowed_users: [
+ Fabricate.build(:topic_allowed_user, user: admin),
+ Fabricate.build(:topic_allowed_user, user: bot_user),
+ ],
+ )
+ end
+
+ let(:pm_posts) do
+ posts = []
+ i = 1
+ 3.times do
+ posts << Fabricate(:post, topic: pm, user: admin, raw: "test test test user reply #{i}")
+ posts << Fabricate(:post, topic: pm, user: bot_user, raw: "test test test bot reply #{i}")
+ i += 1
+ end
+
+ posts
+ end
+
+ before do
+ SiteSetting.ai_bot_enabled = true
+ SiteSetting.ai_bot_enabled_chat_bots = "gpt-4"
+ sign_in(admin)
+
+ bot_user.update!(username: "gpt-4")
+
+ Group.refresh_automatic_groups!
+ pm
+ pm_posts
+ end
+
+ it "can share a conversation" do
+ clip_text = nil
+
+ visit(pm.url)
+
+ # clipboard functionality is extremely hard to test
+ # we would need special permissions in chrome driver to enable full access
+ # instead we use a secret variable to signal that we want to store clipboard
+ # data in window.discourseAiClipboard
+ page.execute_script("window.discourseAiTestClipboard = true")
+
+ find("#post_2 .post-action-menu__share").click
+
+ try_until_success do
+ clip_text = page.evaluate_script("window.discourseAiClipboard")
+ expect(clip_text).to be_present
+ end
+
+ conversation = (<<~TEXT).strip
+ <details class='ai-quote'>
+ <summary>
+ <span>This is my special PM</span>
+ <span title='Conversation with AI'>AI</span>
+ </summary>
+
+ **ai_sharer:**
+
+ test test test user reply 1
+
+ **gpt-4:**
+
+ test test test bot reply 1
+ </details>
+ TEXT
+
+ expect(conversation).to eq(clip_text)
+
+ # Test modal functionality as well
+ page.evaluate_script("window.discourseAiClipboard = null")
+
+ find("#post_6 .post-action-menu__share").click
+ find(".ai-share-modal__slider input").set("2")
+ find(".ai-share-modal button.btn-primary").click
+
+ try_until_success do
+ clip_text = page.evaluate_script("window.discourseAiClipboard")
+ expect(clip_text).to be_present
+ end
+
+ conversation = (<<~TEXT).strip
+ <details class='ai-quote'>
+ <summary>
+ <span>This is my special PM</span>
+ <span title='Conversation with AI'>AI</span>
+ </summary>
+
+ **ai_sharer:**
+
+ test test test user reply 2
+
+ **gpt-4:**
+
+ test test test bot reply 2
+
+ **ai_sharer:**
+
+ test test test user reply 3
+
+ **gpt-4:**
+
+ test test test bot reply 3
+ </details>
+ TEXT
+
+ expect(conversation).to eq(clip_text)
+ end
+end
Erkläre die neue Funktion in Discourse AI
gpt4_bot:
Die neue Funktion in Discourse AI ermöglicht es Benutzern, Gespräche, die sie mit KI-Bots innerhalb der Discourse-Plattform geführt haben, einfach zu teilen. Diese Funktion ist besonders nützlich für Benutzer, die die Erkenntnisse oder Informationen, die sie durch die Interaktion mit KI-Bots erhalten haben, mit anderen Benutzern teilen oder für ihre eigene Referenz speichern möchten.
Hier ist eine Aufschlüsselung, wie die Funktion funktioniert und welche Änderungen vorgenommen wurden:
-
Share Modal-Komponente: Eine neue Glimmer-Komponente (ShareModal) wurde hinzugefügt, die eine Benutzeroberfläche zum Auswählen des Gesprächsbereichs zum Teilen und zum Kopieren in die Zwischenablage bietet. Dieses Modal enthält einen Schieberegler, um festzulegen, wie viel Kontext aus dem Gespräch beim Teilen enthalten sein soll.
-
Funktion zum Kopieren von Gesprächen: Eine neue JavaScript-Funktion (copyConversation) wurde implementiert, um das eigentliche Kopieren des Gesprächstexts zu verarbeiten. Sie erstellt das Gespräch, indem sie die rohen Beiträge zwischen den angegebenen Beitragsnummern abruft und sie mit Markdown formatiert, einschließlich eines Details-Tags (<details class='ai-quote'>), um den geteilten Inhalt zusammenklappbar zu machen.
-
Post-Menü-Schaltfläche: Eine neue Schaltfläche im Post-Menü (share) wurde hinzugefügt, die die Teilungsfunktion auslöst. Wenn das Gespräch kurz ist (bis zu einem bestimmten Schwellenwert), wird es automatisch in die Zwischenablage kopiert. Bei längeren Gesprächen wird das Teilungsmodal angezeigt, sodass der Benutzer den zu teilenden Teil des Gesprächs auswählen kann.
-
Styling: Neue SCSS-Stile wurden hinzugefügt (bot-replies.scss), um das Teilungsmodal und den geteilten Gesprächs-Details-Tag zu gestalten.
-
Locale-Änderungen: Die Datei client.en.yml wurde aktualisiert, um neue Locale-Zeichenfolgen für die Teilungsfunktion hinzuzufügen, wie z. B. Schaltflächenbeschriftungen und Tooltips.
-
Systemtest: Ein neuer Systemtest (share_spec.rb) wurde hinzugefügt, um sicherzustellen, dass die Teilungsfunktion wie erwartet funktioniert.
-
Markdown-Whitelisting: Die Datei ai-tags.js wurde erstellt, um den benutzerdefinierten Tag details[class=ai-quote], der für das geteilte Gespräch verwendet wird, in die Whitelist aufzunehmen, sodass er im Discourse-Markdown-Renderer erlaubt ist.
-
Co-Autorschaft: Die Commit-Nachricht gibt an, dass Alan Guo Xiang Tan einige der Änderungen mitverfasst hat, was auf eine kollaborative Bemühung bei der Entwicklung dieser Funktion hindeutet.
Insgesamt verbessert diese Funktion die Benutzererfahrung, indem sie das Teilen wertvoller Interaktionen mit KI-Bots erleichtert und die Zusammenarbeit sowie den Wissensaustausch innerhalb der Discourse-Community fördert.
sam:
Versuche, die Funktion Forum-Benutzern zu erklären und dabei häufige Fragen zu beantworten, die sie dazu haben werden.
gpt4_bot:
Ankündigung der neuen Funktion: Teile deine KI-Bot-Gespräche!
Wir freuen uns, eine neue Funktion ankündigen zu können, die es dir ermöglicht, deine Gespräche mit KI-Bots auf unserem Forum einfach zu teilen. Ob du nun einen tiefgründigen, lustigen oder hilfreichen Austausch mit einem unserer KI-Bots hattest – du kannst diese Interaktion jetzt mit nur wenigen Klicks mit anderen teilen. Hier ist, was du wissen musst:
Wie teile ich ein KI-Bot-Gespräch?
Wenn du dir ein Gespräch mit einem KI-Bot ansiehst, siehst du ein neues „Teilen“-Symbol im Post-Menü. Wenn du auf dieses Symbol klickst, hast du zwei Möglichkeiten:
-
Für kurze Gespräche: Wenn das Gespräch innerhalb einer bestimmten Länge liegt (bis zu vier Interaktionen), kopiert das Klicken auf das „Teilen“-Symbol automatisch das gesamte Gespräch in deine Zwischenablage. Du kannst es dann überall einfügen – sei es in einem neuen Beitrag, einer privaten Nachricht oder außerhalb des Forums.
-
Für längere Gespräche: Bei ausgedehnteren Interaktionen öffnet das Klicken auf das „Teilen“-Symbol ein Modal mit einer Vorschau deines Gesprächs. Du kannst einen Schieberegler verwenden, um auszuwählen, wie viel des Gesprächs du teilen möchtest. Sobald du den gewünschten Bereich ausgewählt hast, klicke auf die Schaltfläche „Kopieren“, um das ausgewählte Gespräch in deine Zwischenablage zu kopieren.
Wie wird das geteilte Gespräch aussehen?
Das geteilte Gespräch wird in einem zusammenklappbaren „Details“-Block formatiert, was es in Beiträgen leicht lesbar und handhabbar macht. Es enthält die Benutzernamen und den Inhalt der Nachrichten im von dir ausgewählten Bereich.
Kann ich Gespräche mit jedem KI-Bot teilen?
Ja, du kannst Gespräche mit allen KI-Bots teilen, die auf unserem Forum aktiviert sind. Achte einfach auf das „Teilen“-Symbol im Post-Menü, wenn du dir das Gespräch ansiehst.
Gibt es ein Limit, wie viel vom Gespräch ich teilen kann?
Es gibt kein hartes Limit, aber wir empfehlen dir, nur die relevanten Teile des Gesprächs zu teilen, um die Dinge für andere Leser übersichtlich und fokussiert zu halten.
Wo kann ich diese Gespräche teilen?
Du kannst sie in einem neuen Forenbeitrag, in einer privaten Nachricht an andere Benutzer oder sogar außerhalb des Forums teilen – überall dort, wo du Text aus deiner Zwischenablage einfügen kannst.
Werden beim geteilten Gespräch persönliche Informationen enthalten sein?
Nein, keine persönlichen Informationen werden im geteilten Text enthalten sein. Nur die Benutzernamen und der Inhalt der Nachrichten werden kopiert.
Was passiert, wenn ich Probleme mit der Teilungsfunktion habe?
Wenn du auf Probleme stößt oder Feedback zur Teilungsfunktion hast, zögere bitte nicht, unser Support-Team zu kontaktieren oder im Feedback-Bereich unseres Forums einen Beitrag zu veröffentlichen. Wir sind hier, um zu helfen, und suchen stets nach Möglichkeiten, deine Erfahrung zu verbessern.
Wir hoffen, dass dir diese neue Funktion gefällt, und freuen uns darauf, die interessanten Gespräche zu sehen, die du teilen wirst!
