From 259fa58268ffc5f171c7c6da18241ce9f7b3ac70 Mon Sep 17 00:00:00 2001
From: Jean Schmitz <jean@schmitzonline.name>
Date: Thu, 23 Nov 2023 11:25:47 +0100
Subject: [PATCH] Refactoring of AssistantElement.vue

---
 .../components/choice/AssistantElement.vue    | 98 ++++++++++++-------
 1 file changed, 64 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/choice/AssistantElement.vue b/frontend/src/components/choice/AssistantElement.vue
index 80e6f9be..21274c6a 100644
--- a/frontend/src/components/choice/AssistantElement.vue
+++ b/frontend/src/components/choice/AssistantElement.vue
@@ -18,11 +18,10 @@
 
 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},
+  components: {},
   setup() {
     const store = useChatStore(); // Call useMyStore() inside the setup function
     return {store};
@@ -55,51 +54,82 @@ export default {
 </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 class="card persona-card">
+    <div class="card-image">
+      <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>
+      <h5 class="card-title" @click.prevent="onPersonaSelected()">{{ assistant.name }}</h5>
+      <div class="card-description">{{ assistant.description }}
       </div>
     </div>
-
-    <div class="row g-0 p-3" role="button" @click.prevent="onPersonaSelected()">
-      <small class="text-body-secondary">{{ assistant.description }}</small>
+    <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>
-
-    <persona-compact-info :assistant="assistant" :show-properties="false"></persona-compact-info>
-
   </div>
 </template>
 
 <style scoped>
-
 .persona-card {
-  min-width: 200px;
-  min-height: 170px;
+  min-width: 150px;
+  min-height: 150px;
+  width: 150px; /* Set a fixed width */
+  height: 150px; /* Set a fixed height */
+  position: relative;
 }
 
 .persona-icon {
-  width: 6em;
-  height: 6em;
+  width: 100%;
+  height: auto;
 }
 
 .robot-icon {
-  color: darksalmon;
+  width: 100%;
+  height: 100px;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.card-title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 2px;
+}
+
+.card-description {
+  position: absolute;
+  bottom: 0px;
+  left: 10px;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 2px;
+  font-style: italic;
+  display: -webkit-box; /* Required for line-clamp to work */
+  -webkit-line-clamp: 2; /* Truncate text at 2 lines */
+  -webkit-box-orient: vertical; /* Required for line-clamp to work */
+  overflow: hidden; /* Hides the text that overflows the card width */
+  text-overflow: ellipsis; /* Shows an ellipsis when the text overflows */
+  width: 90%; /* Adjust as needed */
+}
+
+.edit-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.7); /* Add a semi-transparent white background */
+  border-radius: 50%; /* Make the button round */
+  padding: 5px; /* Add some padding */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 </style>