It's so bad that it works... AI: feat: update environment variables in .env.example; enhance chatbot and hotnews components; improve sources layout and image handling; add new logo assets

components/app/windows/chatbot.vue

@@ -12,18 +12,20 @@ onMounted(() => {
 <template>
   <div class="justify-center align-center text-center flex flex-col">
     <div class="flex flex-row justify-between">
-        <div>Chat Name</div>
+      <div>Chat Name</div>
       <div class="flex flex-row justify-center align-center text-center">
-        <div class="flex flex-row justify-center align-center text-center gap-2">
-            <button class="p-2 rounded-lg hover:bg-gray-300">
-                <History class="h-4 w-4" />
-            </button>
-            <button class="p-2 rounded-lg hover:bg-gray-300">
-                <Plus class="h-4 w-4" />
-            </button>
+        <div
+          class="flex flex-row justify-center align-center text-center gap-2"
+        >
+          <button class="p-2 rounded-lg hover:bg-gray-300">
+            <History class="h-4 w-4" />
+          </button>
+          <button class="p-2 rounded-lg hover:bg-gray-300">
+            <Plus class="h-4 w-4" />
+          </button>
         </div>
       </div>
     </div>
-    <hr/>
+    <hr />
   </div>
 </template>

components/app/windows/hotnews.vue

@@ -13,9 +13,7 @@ try {
 }
 </script>
 <template>
-  <div v-if="!ffeed">
-    Loading...
-  </div>
+  <div v-if="!ffeed">Loading...</div>
   <div
     v-for="item in ffeed"
     class="justify-center align-center text-center p-4 border border-black rounded-lg m-4"

components/app/windows/sources.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import noImageLogo from "~/public/geterrorassets/noImageLogo.svg";
 const { t, locale } = useI18n();
 
+const emit = defineEmits(['windowopener'])
+
+const openNewWindow = (windowName: string) => {
+  emit('windowopener', windowName)
+}
+
 const {
   data: source,
   pending,
@@ -14,13 +21,52 @@ const {
     lang: locale,
   },
 });
+
+async function getImageSource(image: string) {
+  console.log(image);
+  if (!image || image === "#") {
+    return noImageLogo;
+  }
+  try {
+    const checkImgWorks = await fetch(image, {
+      method: "GET",
+    });
+    if (checkImgWorks.status === 200) {
+      return image;
+    } else {
+      return noImageLogo;
+    }
+  } catch (error) {
+    return noImageLogo;
+  }
+}
+const imageUrls = ref<{ [key: string]: string }>({});
+
+// Load image sources when component mounts
+onMounted(async () => {
+  if (source.value?.data) {
+    for (const item of source.value.data) {
+      imageUrls.value[item.id] = await getImageSource(item.logo);
+    }
+  }
+});
 </script>
 <template>
-  <div>
-    <div v-for="item in source?.data" :key="item.id">
-      <h1>{{ item.title }}</h1>
-      <span>{{ item.description }}</span>
-      <a :href="item.url">{{ item.url }}</a>
+  <div class="flex flex-row flexw-wrap justify-center gap-2">
+    <div
+      class="flex flex-col group bg-gray-900/30 rounded-xl p-3 transition-all duration-500 shadow-lg hover:translate-y-[-2px] ransition-all duration-700"
+      v-for="item in source?.data"
+      :key="item.id"
+    >
+      <button @click="openNewWindow('chatbot')">
+        <img
+          :src="imageUrls[item.id] || noImageLogo"
+          alt="Organization Logo"
+          class="w-16 h-16 rounded-xl"
+        />
+        <h1>{{ item.title }}</h1>
+        <span>{{ item.description }}</span>
+      </button>
     </div>
   </div>
 </template>