From 0a41ce3e9f8181af8c71d448f2b1e1491eeb7d89 Mon Sep 17 00:00:00 2001
From: Jean Schmitz <jean@schmitzonline.name>
Date: Thu, 23 Nov 2023 10:37:28 +0100
Subject: [PATCH] AssistantElement.vue created

---
 .../components/choice/AssistantElement.vue    | 105 ++++++++++++++++++
 frontend/src/views/PersonaChoiceView.vue      |  48 ++------
 2 files changed, 113 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/components/choice/AssistantElement.vue

diff --git a/frontend/src/components/choice/AssistantElement.vue b/frontend/src/components/choice/AssistantElement.vue
new file mode 100644
index 00000000..6b340a6a
--- /dev/null
+++ b/frontend/src/components/choice/AssistantElement.vue
@@ -0,0 +1,105 @@
+<!--
+  - Copyright (c) 2023 Jean Schmitz.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script>
+
+import {useChatStore} from '@/store/chat-store';
+import Assistant from '@/store/to/assistant';
+import PersonaCompactInfo from '@/components/persona/PersonaCompactInfo.vue';
+
+export default {
+  name: 'AssistantElement',
+  components: {PersonaCompactInfo},
+  setup() {
+    const store = useChatStore(); // Call useMyStore() inside the setup function
+    return {store};
+  },
+  data() {
+    return {};
+  },
+  props: {
+    assistant: Assistant,
+  },
+  computed: {
+    imageSrc() {
+      return this.store.getAssistantImageUrl(this.assistant.image_path);
+    },
+    isShowAssistantImage() {
+      return !!this.assistant.image_path;
+    },
+  },
+  methods: {
+    onPersonaSelected() {
+      console.log('PersonaChoiceView.onPersonaSelected: ' + this.assistant.id,
+          this.store.assistantList);
+      this.$router.push({name: 'chat', params: {assistantId: this.assistant.id}});
+    },
+    onEditPersona() {
+      this.$router.push({name: 'persona-edit', params: {assistantId: this.assistant.id}});
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card mb-3 persona-card"
+       style="max-width: 300px;">
+    <div class="row g-0">
+      <div class="col-md-4">
+        <img v-if="isShowAssistantImage" :alt="assistant.name"
+             :src="imageSrc"
+             class="persona-icon" role="button" @click.prevent="onPersonaSelected()"/>
+        <i v-else class="fs-1 bi bi-robot robot-icon"></i>
+      </div>
+      <div class="col-md-6">
+        <div class="card-body">
+          <h5 class="card-title" @click.prevent="onPersonaSelected()">{{
+              assistant.name
+            }}</h5>
+        </div>
+      </div>
+
+      <div class="col-2 d-inline-flex flex-row-reverse my-1 p-2">
+        <i class="bi bi-pencil edit-button" role="button"
+           @click.prevent="onEditPersona()"></i>
+      </div>
+    </div>
+
+    <div class="row g-0 p-3" role="button" @click.prevent="onPersonaSelected()">
+      <small class="text-body-secondary">{{ assistant.description }}</small>
+    </div>
+
+    <persona-compact-info :assistant="assistant"></persona-compact-info>
+
+  </div>
+</template>
+
+<style scoped>
+
+.persona-card {
+  min-width: 200px;
+  min-height: 170px;
+}
+
+.persona-icon {
+  width: 6em;
+  height: 6em;
+}
+
+.robot-icon {
+  color: darksalmon;
+}
+</style>
diff --git a/frontend/src/views/PersonaChoiceView.vue b/frontend/src/views/PersonaChoiceView.vue
index cf3912ac..c5a8d9c3 100644
--- a/frontend/src/views/PersonaChoiceView.vue
+++ b/frontend/src/views/PersonaChoiceView.vue
@@ -24,37 +24,12 @@
     <div class="row scrollable-persona-list">
 
       <div v-for="assistant in assistantList" :key="assistant.id" class="col-md-3">
-        <div class="card mb-3 persona-card"
-             style="max-width: 300px;">
-          <div class="row g-0">
-            <div class="col-md-4">
-              <img v-if="isShowAssistantImage(assistant)" :alt="assistant.name" :src="imageSrc(assistant.image_path)"
-                   class="persona-icon" role="button" @click.prevent="onPersonaSelected(assistant.id)"/>
-              <i v-else class="fs-1 bi bi-robot robot-icon"></i>
-            </div>
-            <div class="col-md-6">
-              <div class="card-body">
-                <h5 class="card-title" @click.prevent="onPersonaSelected(assistant)">{{ assistant.name }}</h5>
-              </div>
-            </div>
-
-            <div class="col-2 d-inline-flex flex-row-reverse my-1 p-2">
-              <i class="bi bi-pencil edit-button" role="button" @click.prevent="onEditPersona(assistant.id)"></i>
-            </div>
-          </div>
-
-          <div class="row g-0 p-3" role="button" @click.prevent="onPersonaSelected(assistant.id)">
-            <small class="text-body-secondary">{{ assistant.description }}</small>
-          </div>
-
-          <persona-compact-info :assistant="assistant"></persona-compact-info>
-
-        </div>
-
+        <assistant-element :assistant="assistant"></assistant-element>
       </div>
 
       <div class="col-md-3">
-        <div class="card bg-gradient text-center persona-card" role="button" @click.prevent="onCreateNewPersona">
+        <div class="card bg-gradient text-center persona-card" role="button"
+             @click.prevent="onCreateNewPersona">
           <div class="card-body">
             <h5 class="card-title">
               Create new assistant...
@@ -70,10 +45,10 @@
 <script>
 import {defineComponent} from 'vue';
 import {useChatStore} from '@/store/chat-store';
-import PersonaCompactInfo from '@/components/persona/PersonaCompactInfo.vue';
+import AssistantElement from '@/components/choice/AssistantElement.vue';
 
 export default defineComponent({
-  components: {PersonaCompactInfo},
+  components: {AssistantElement},
   setup() {
     const store = useChatStore(); // Call useMyStore() inside the setup function
     return {store};
@@ -89,22 +64,15 @@ export default defineComponent({
     },
   },
   methods: {
-    imageSrc(imagePath) {
-      return this.store.getAssistantImageUrl(imagePath);
-    },
+
     isShowAssistantImage(assistant) {
       return !!assistant.image_path;
     },
-    onPersonaSelected(assistantId) {
-      console.log('PersonaChoiceView.onPersonaSelected: ' + assistantId, this.store.assistantList);
-      this.$router.push({name: 'chat', params: {assistantId}});
-    },
+
     onCreateNewPersona() {
       this.$router.push({name: 'persona-create'});
     },
-    onEditPersona(assistantId) {
-      this.$router.push({name: 'persona-edit', params: {assistantId}});
-    },
+
   },
   async mounted() {
     await this.store.syncAssistants();