Refactoring of AssistantElement.vue

jschm42 · Nov 23, 2023 · cc97699 · cc97699
1 parent 259fa58
commit cc97699
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/components/choice/AssistantElement.vue b/frontend/src/components/choice/AssistantElement.vue
@@ -54,11 +54,18 @@ export default {
 </script>
 
 <template>
-  <div class="card persona-card">
+  <div class="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>
+
+      <svg v-else class="bi bi-robot robot-icon" fill="currentColor" viewBox="0 0 16 16"
+           xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"/>
+        <path
+            d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/>
+      </svg>
       <h5 class="card-title" @click.prevent="onPersonaSelected()">{{ assistant.name }}</h5>
       <div class="card-description">{{ assistant.description }}
       </div>
@@ -86,7 +93,10 @@ export default {
 
 .robot-icon {
   width: 100%;
-  height: 100px;
+  height: auto;
+  padding: 50px;
+  color: #6c757d;
+  background-color: #303030;
 }
 
 .card-image {
@@ -100,17 +110,15 @@ export default {
   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;
+  bottom: -20px;
   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;

diff --git a/frontend/src/components/persona/PersonaCompactInfo.vue b/frontend/src/components/persona/PersonaCompactInfo.vue
@@ -71,6 +71,10 @@ export default {
         value: this.assistant.model,
       });
 
+      if (!this.assistant.properties) {
+        return result;
+      }
+
       if (this.assistant.properties[AssistantProperties.TTS_TYPE] === TTSType.ELEVENLABS) {
         result.push({
           key: TTSType.ELEVENLABS,