Support icon for i18n

index.html

@@ -54,6 +54,7 @@
 
     <!-- Vue i18n -->
     <script src="https://cdn.aiql.com/npm/vue-i18n/dist/vue-i18n.global.prod.min.js"></script>
+    <script src="https://cdn.aiql.com/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
 
     <!-- Pinia -->
     <script src="https://cdn.aiql.com/npm/vue-demi/lib/index.iife.min.js"></script>
@@ -268,6 +269,7 @@
         ::-webkit-scrollbar-thumb:hover {
             background-color: grey;
         }
+
     </style>
 </head>
 
@@ -317,20 +319,22 @@
                                     <div class="text-caption" v-else>Q</div>
                                 </v-btn>
                             </template>
-                            <v-list>
+                            <v-list class='mb-2'>
                                 <v-list-item v-for="n in
-                                [{title: 'English', value: 'en'},
-                                {title: 'Svenska', value: 'sv'},
-                                {title: '简体中文', value: 'zhHans'}]" :key="n.value" @click="changeLanguage(n.value)"
-                                    :title="n.title" density="compact">
+                                [{title: 'English', value: 'en', name: 'united-states'},
+                                {title: 'Svenska', value: 'sv', name: 'sweden'},
+                                {title: '简体中文', value: 'zhHans', name: 'china'}
+                                ]" :key="n.value" @click="changeLanguage(n.value)" density="compact">
+                                    <template v-slot:prepend>
+                                        <iconify-icon class='mr-3' :icon="`twemoji:flag-${n.name}`"></iconify-icon>
+                                    </template>
+                                    <v-list-item-title v-text="n.title"></v-list-item-title>
                                 </v-list-item>
                             </v-list>
                         </v-menu>
                     </v-row>
                 </v-col>
 
-
-
                 <v-sheet elevation="0" class="input-panel d-flex align-end px-1">
                     <v-container>
                         <v-row>
@@ -359,7 +363,7 @@
                             @click="messageStore.sendMessage" icon="mdi-arrow-up">
                         </v-btn>
                         <v-btn v-else-if="messageStore.generating" size="small" color="primary" variant="elevated"
-                            @click="snackbarStore.showInfoMessage('Generating stopped.')" icon="mdi-stop"></v-btn>
+                            @click="snackbarStore.showInfoMessage('$vuetify.dataIterator.snackbar.stopped')" icon="mdi-stop"></v-btn>
                         <v-btn v-else-if="messageStore.conversation.length > 0" size="small" color="primary"
                             variant="elevated" @click="messageStore.resendMessage" icon="mdi-autorenew"></v-btn>
                         <v-btn v-else size="small" color="grey" variant="elevated" icon="mdi-arrow-up">