From 74e4bbc8195cd67bc5f3c271af2c6f8dcef2083c Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Thu, 13 Feb 2025 16:43:40 +0100
Subject: [PATCH 1/5] basic adjustments of agency confirmation style

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/ChattyLLM/AgencyAction.vue       | 8 +-------
 src/components/ChattyLLM/AgencyConfirmation.vue | 6 +++---
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/ChattyLLM/AgencyAction.vue b/src/components/ChattyLLM/AgencyAction.vue
index bac9dfbb..e37e067b 100644
--- a/src/components/ChattyLLM/AgencyAction.vue
+++ b/src/components/ChattyLLM/AgencyAction.vue
@@ -16,17 +16,12 @@
 			class="param"
 			:no-close="true"
 			:text="getParamText(argName, argValue)"
-			:title="getParamText(argName, argValue)">
-			<template #icon>
-				<CogIcon :size="16" />
-			</template>
-		</NcChip>
+			:title="getParamText(argName, argValue)" />
 	</div>
 </template>
 
 <script>
 import ToolsIcon from 'vue-material-design-icons/Tools.vue'
-import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 
@@ -36,7 +31,6 @@ export default {
 	components: {
 		NcChip,
 		ToolsIcon,
-		CogIcon,
 	},
 
 	props: {
diff --git a/src/components/ChattyLLM/AgencyConfirmation.vue b/src/components/ChattyLLM/AgencyConfirmation.vue
index c16d56f7..ce521a15 100644
--- a/src/components/ChattyLLM/AgencyConfirmation.vue
+++ b/src/components/ChattyLLM/AgencyConfirmation.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcNoteCard type="warning"
+	<NcNoteCard type="info"
 		class="agency-confirmation">
 		<div class="notecard-content">
 			<span>
@@ -18,14 +18,14 @@
 						<InformationOutlineIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton type="success"
+				<NcButton type="primary"
 					@click="$emit('confirm')">
 					{{ t('assistant', 'Confirm those actions') }}
 					<template #icon>
 						<AssistantIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton type="error"
+				<NcButton type="secondary"
 					@click="$emit('reject')">
 					{{ t('assistant', 'Cancel') }}
 					<template #icon>

From 5c7944b0c6b6fd306450a33f6c2f06935be58dd4 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Mon, 24 Feb 2025 13:52:51 +0100
Subject: [PATCH 2/5] change style of agency actions in confirmation box

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/ChattyLLM/AgencyAction.vue  | 40 +++++++++++++---------
 src/components/ChattyLLM/AgencyActions.vue | 11 ++++--
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/ChattyLLM/AgencyAction.vue b/src/components/ChattyLLM/AgencyAction.vue
index e37e067b..82394a82 100644
--- a/src/components/ChattyLLM/AgencyAction.vue
+++ b/src/components/ChattyLLM/AgencyAction.vue
@@ -4,32 +4,28 @@
 -->
 <template>
 	<div class="agency-action">
-		<NcChip type="primary"
-			:no-close="true"
-			:text="action.name.replace(/_/g, ' ')">
-			<template #icon>
-				<ToolsIcon :size="16" />
-			</template>
-		</NcChip>
-		<NcChip v-for="(argValue, argName) in action.args"
+		<div class="action-title">
+			<ToolsIcon :size="20" />
+			<strong>
+				{{ action.name.replace(/_/g, ' ') }}
+			</strong>
+		</div>
+		<span v-for="(argValue, argName) in action.args"
 			:key="argName + argValue"
 			class="param"
-			:no-close="true"
-			:text="getParamText(argName, argValue)"
-			:title="getParamText(argName, argValue)" />
+			:title="getParamText(argName, argValue)">
+			{{ getParamText(argName, argValue) }}
+		</span>
 	</div>
 </template>
 
 <script>
 import ToolsIcon from 'vue-material-design-icons/Tools.vue'
 
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
-
 export default {
 	name: 'AgencyAction',
 
 	components: {
-		NcChip,
 		ToolsIcon,
 	},
 
@@ -51,12 +47,24 @@ export default {
 <style lang="scss" scoped>
 .agency-action {
 	display: flex;
+	flex-direction: column;
 	align-items: start;
 	gap: 4px;
-	flex-wrap: wrap;
+
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-primary-element-light-hover);
+	padding: 8px;
+
+	.action-title {
+		display: flex;
+		align-items: center;
+	}
 
 	.param {
-		max-width: 300px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		width: 100%;
+		overflow: hidden;
 	}
 }
 </style>
diff --git a/src/components/ChattyLLM/AgencyActions.vue b/src/components/ChattyLLM/AgencyActions.vue
index b6065d78..7ac95416 100644
--- a/src/components/ChattyLLM/AgencyActions.vue
+++ b/src/components/ChattyLLM/AgencyActions.vue
@@ -6,7 +6,8 @@
 	<div class="agency-actions">
 		<AgencyAction v-for="action in actions"
 			:key="action.id"
-			:action="action" />
+			:action="action"
+			class="action" />
 	</div>
 </template>
 
@@ -32,8 +33,12 @@ export default {
 <style lang="scss" scoped>
 .agency-actions {
 	display: flex;
-	flex-direction: column;
+	flex-wrap: wrap;
 	align-items: start;
-	gap: 4px;
+	gap: 8px;
+
+	.action {
+		max-width: 300px;
+	}
 }
 </style>

From 5c0d1fa72d5739a4ccb95a1105246deaf4afc203 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Mon, 24 Feb 2025 15:37:11 +0100
Subject: [PATCH 3/5] dynamically load the agency action icon, improve agency
 confirmation style

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 lib/Controller/ChattyLLMController.php     | 46 +++++++++++++++++-----
 package-lock.json                          |  1 +
 package.json                               |  1 +
 src/components/ChattyLLM/AgencyAction.vue  | 23 +++++++++--
 src/components/ChattyLLM/AgencyActions.vue |  2 +-
 5 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/lib/Controller/ChattyLLMController.php b/lib/Controller/ChattyLLMController.php
index 2288a33f..421c2f9e 100644
--- a/lib/Controller/ChattyLLMController.php
+++ b/lib/Controller/ChattyLLMController.php
@@ -36,7 +36,7 @@
 
 #[OpenAPI(scope: OpenAPI::SCOPE_IGNORE)]
 class ChattyLLMController extends Controller {
-	private array $agencyActionNames;
+	private array $agencyActionData;
 
 	public function __construct(
 		string $appName,
@@ -51,19 +51,47 @@ public function __construct(
 		private ?string $userId,
 	) {
 		parent::__construct($appName, $request);
-		$this->agencyActionNames = [
-			'send_message_to_conversation' => $this->l10n->t('Send a message to a Talk conversation'),
-			'list_talk_conversations' => $this->l10n->t('List Talk conversations'),
-			'list_messages_in_conversation' => $this->l10n->t('List messages in a Talk conversation'),
-			'schedule_event' => $this->l10n->t('Schedule a calendar event'),
-			'list_calendars' => $this->l10n->t('List calendars'),
+		$this->agencyActionData = [
+			// talk
+			'send_message_to_conversation' => [
+				'title' => $this->l10n->t('Send a message to a Talk conversation'),
+				'icon' => 'Send',
+			],
+			'create_public_conversation' => [
+				'title' => $this->l10n->t('Create a conversation'),
+				'icon' => 'ChatPlus',
+			],
+			// mail
+			'send_email' => [
+				'title' => $this->l10n->t('Send an email'),
+				'icon' => 'EmailPlus',
+			],
+			// calendar
+			'schedule_event' => [
+				'title' => $this->l10n->t('Schedule a calendar event'),
+				'icon' => 'CalendarPlus',
+			],
+			'add_task' => [
+				'title' => $this->l10n->t('Add a calendar task'),
+				'icon' => 'CalendarCheck',
+			],
+			// deck
+			'add_card' => [
+				'title' => $this->l10n->t('Create a Deck card'),
+				'icon' => 'CardPlus',
+			],
 		];
 	}
 
 	private function improveAgencyActionNames(array $actions): array {
 		return array_map(function ($action) {
-			if (isset($action->name) && isset($this->agencyActionNames[$action->name])) {
-				$action->name = $this->agencyActionNames[$action->name];
+			if (isset($action->name, $this->agencyActionData[$action->name])) {
+				if (isset($this->agencyActionData[$action->name]['icon'])) {
+					$action->icon = $this->agencyActionData[$action->name]['icon'];
+				}
+				if (isset($this->agencyActionData[$action->name]['title'])) {
+					$action->name = $this->agencyActionData[$action->name]['title'];
+				}
 			}
 			return $action;
 		}, $actions);
diff --git a/package-lock.json b/package-lock.json
index b251c91d..41070fe7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"license": "AGPL-3.0",
 			"dependencies": {
+				"@mdi/js": "^7.4.47",
 				"@mdi/svg": "^7.4.47",
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
diff --git a/package.json b/package.json
index 16ff8346..698b9bfa 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 		"npm": "^10.0.0"
 	},
 	"dependencies": {
+		"@mdi/js": "^7.4.47",
 		"@mdi/svg": "^7.4.47",
 		"@nextcloud/auth": "^2.0.0",
 		"@nextcloud/axios": "^2.0.0",
diff --git a/src/components/ChattyLLM/AgencyAction.vue b/src/components/ChattyLLM/AgencyAction.vue
index 82394a82..4ef3e065 100644
--- a/src/components/ChattyLLM/AgencyAction.vue
+++ b/src/components/ChattyLLM/AgencyAction.vue
@@ -5,9 +5,9 @@
 <template>
 	<div class="agency-action">
 		<div class="action-title">
-			<ToolsIcon :size="20" />
+			<NcIconSvgWrapper :path="iconPath" :name="action.name" />
 			<strong>
-				{{ action.name.replace(/_/g, ' ') }}
+				{{ action.name }}
 			</strong>
 		</div>
 		<span v-for="(argValue, argName) in action.args"
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import ToolsIcon from 'vue-material-design-icons/Tools.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 export default {
 	name: 'AgencyAction',
 
 	components: {
-		ToolsIcon,
+		NcIconSvgWrapper,
 	},
 
 	props: {
@@ -36,10 +36,24 @@ export default {
 		},
 	},
 
+	data: () => {
+		return {
+			iconPath: null,
+		}
+	},
+
+	mounted() {
+		this.getIcon()
+	},
+
 	methods: {
 		getParamText(argName, argValue) {
 			return argName.replace(/_/g, ' ') + ': ' + argValue
 		},
+		async getIcon() {
+			const { ['mdi' + (this.action.icon ?? 'Tools')]: icon } = await import('@mdi/js')
+			this.iconPath = icon
+		},
 	},
 }
 </script>
@@ -58,6 +72,7 @@ export default {
 	.action-title {
 		display: flex;
 		align-items: center;
+		gap: 4px;
 	}
 
 	.param {
diff --git a/src/components/ChattyLLM/AgencyActions.vue b/src/components/ChattyLLM/AgencyActions.vue
index 7ac95416..ced316e2 100644
--- a/src/components/ChattyLLM/AgencyActions.vue
+++ b/src/components/ChattyLLM/AgencyActions.vue
@@ -34,7 +34,7 @@ export default {
 .agency-actions {
 	display: flex;
 	flex-wrap: wrap;
-	align-items: start;
+	align-items: stretch;
 	gap: 8px;
 
 	.action {

From a2f21b9379ba78122b4314d1439b4ab0dbccb3e6 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Mon, 24 Feb 2025 16:17:06 +0100
Subject: [PATCH 4/5] fold/expand params of agency actions that have more than
 3

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/ChattyLLM/AgencyAction.vue | 41 ++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/ChattyLLM/AgencyAction.vue b/src/components/ChattyLLM/AgencyAction.vue
index 4ef3e065..76a74bce 100644
--- a/src/components/ChattyLLM/AgencyAction.vue
+++ b/src/components/ChattyLLM/AgencyAction.vue
@@ -10,23 +10,41 @@
 				{{ action.name }}
 			</strong>
 		</div>
-		<span v-for="(argValue, argName) in action.args"
+		<span v-for="(argValue, argName) in actionArguments"
 			:key="argName + argValue"
 			class="param"
 			:title="getParamText(argName, argValue)">
 			{{ getParamText(argName, argValue) }}
 		</span>
+		<NcButton v-if="needsExpand"
+			class="expand"
+			@click="expanded = !expanded">
+			{{ expanded ? t('assistant', 'Less') : t('assistant', 'More') }}
+			<template #icon>
+				<ChevronDoubleUpIcon v-if="expanded" />
+				<ChevronDoubleDownIcon v-else />
+			</template>
+		</NcButton>
 	</div>
 </template>
 
 <script>
+import ChevronDoubleDownIcon from 'vue-material-design-icons/ChevronDoubleDown.vue'
+import ChevronDoubleUpIcon from 'vue-material-design-icons/ChevronDoubleUp.vue'
+
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+const maxDisplayedArgs = 3
 
 export default {
 	name: 'AgencyAction',
 
 	components: {
 		NcIconSvgWrapper,
+		NcButton,
+		ChevronDoubleDownIcon,
+		ChevronDoubleUpIcon,
 	},
 
 	props: {
@@ -39,9 +57,26 @@ export default {
 	data: () => {
 		return {
 			iconPath: null,
+			expanded: false,
 		}
 	},
 
+	computed: {
+		needsExpand() {
+			return Object.keys(this.action.args).length > maxDisplayedArgs
+		},
+		actionArguments() {
+			if (this.needsExpand && !this.expanded) {
+				const keys = Object.keys(this.action.args).slice(0, maxDisplayedArgs)
+				return keys.reduce((acc, val) => {
+					acc[val] = this.action.args[val]
+					return acc
+				}, {})
+			}
+			return this.action.args
+		},
+	},
+
 	mounted() {
 		this.getIcon()
 	},
@@ -81,5 +116,9 @@ export default {
 		width: 100%;
 		overflow: hidden;
 	}
+
+	.expand {
+		align-self: center;
+	}
 }
 </style>

From f12f2e53bd69abdbae81a8dc6fd146ce309d0886 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Tue, 25 Feb 2025 13:22:02 +0100
Subject: [PATCH 5/5] switch ok/cancel buttons in agency confirmation info box

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/ChattyLLM/AgencyConfirmation.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ChattyLLM/AgencyConfirmation.vue b/src/components/ChattyLLM/AgencyConfirmation.vue
index ce521a15..fe8b0bce 100644
--- a/src/components/ChattyLLM/AgencyConfirmation.vue
+++ b/src/components/ChattyLLM/AgencyConfirmation.vue
@@ -18,13 +18,6 @@
 						<InformationOutlineIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton type="primary"
-					@click="$emit('confirm')">
-					{{ t('assistant', 'Confirm those actions') }}
-					<template #icon>
-						<AssistantIcon :size="20" />
-					</template>
-				</NcButton>
 				<NcButton type="secondary"
 					@click="$emit('reject')">
 					{{ t('assistant', 'Cancel') }}
@@ -32,6 +25,13 @@
 						<CloseIcon :size="20" />
 					</template>
 				</NcButton>
+				<NcButton type="primary"
+					@click="$emit('confirm')">
+					{{ t('assistant', 'Confirm those actions') }}
+					<template #icon>
+						<AssistantIcon :size="20" />
+					</template>
+				</NcButton>
 			</div>
 		</div>
 	</NcNoteCard>