Better API Key Input hints

apps/upskii/messages/en.json

@@ -210,7 +210,7 @@
     "api-key-valid-desc": "API Key succesfully validated and has been saved",
     "api-key-invalid-title": "Invalid API Key",
     "api-key-invalid-desc": "Please provide a valid API Key or try again",
-    "api-key-required": "Please provide a valid key format",
+    "api-key-required-format": "Please provide a valid key format",
     "api-key-saved-title": "API key saved",
     "api-key-saved-desc": "Your API Key has been saved. Please refresh the page to start using the AI.",
     "validate": "Validate",
@@ -220,7 +220,9 @@
     "api_input_description": "Input your API Key to access AI features",
     "delete-api-key": "Delete API Key",
     "api-key-deleted-title": "API Key Deleted",
-    "api-key-deleted-desc": "Your API Key has been successfully deleted"
+    "api-key-deleted-desc": "Your API Key has been successfully deleted",
+    "api-key-required": "Please provide your API Key to continue",
+    "get-api-key-from": "Get your API Key from"
   },
   "api-key-data-table": {
     "id": "ID",

apps/upskii/messages/vi.json

@@ -210,7 +210,7 @@
     "api-key-invalid-title": "API Key không hợp lệ",
     "api-key-valid-title": "API Key hợp lệ",
     "api-key-invalid-desc": "Vui lòng cung cấp API Key hợp lệ hoặc thử lại",
-    "api-key-required": "Vui lòng cung cấp một định dạng hợp lệ",
+    "api-key-required-format": "Vui lòng cung cấp một định dạng hợp lệ",
     "api-key-saved-title": "Key API được lưu",
     "validate": "Kiểm tra",
     "save-api-key": "Lưu trữ",
@@ -220,7 +220,9 @@
     "api_input_description": "Nhập chìa khóa API của bạn để sử dụng những tính năng AI",
     "delete-api-key": "Xóa chìa khóa API",
     "api-key-deleted-title": "Chìa khóa API đã được xóa",
-    "api-key-deleted-desc": "Chìa khóa API của bạn đã được xóa"
+    "api-key-deleted-desc": "Chìa khóa API của bạn đã được xóa",
+    "api-key-required": "Vui lòng cung cấp khóa API của bạn để tiếp tục",
+    "get-api-key-from": "Nhận khóa API của bạn từ"
   },
   "api-key-data-table": {
     "id": "Mã số",
@@ -1824,7 +1826,7 @@
           "answer5": "Nền tảng này có khả năng tùy biến cao với các tùy chọn gắn nhãn trắng, nhãn hiệu tùy chỉnh, quy trình công việc có thể định cấu hình và tích hợp API. \nBạn có thể điều chỉnh trải nghiệm học tập để phù hợp với nhu cầu của tổ chức bạn.",
           "question6": "Các yêu cầu phần cứng là gì?",
           "answer6": "Nền tảng dựa trên đám mây của chúng tôi hoạt động trên mọi trình duyệt web hiện đại. \nĐể tổ chức hội nghị truyền hình tối ưu, chúng tôi khuyên bạn nên kết nối Internet ổn định và cập nhật các thiết bị có chức năng camera và micrô.",
-          "question7": "Việc sao lưu dữ liệu được xử lí như thế nào?",
+          "question7": "Việc sao lưu dữ liệu ược xử lí như thế nào?",
           "answer7": "Chúng tôi duy trì các bản sao lưu tự động hàng ngày với khả năng lưu giữ trong 30 ngày, lưu trữ dự phòng theo địa lý và các giao thức khắc phục thảm họa. \nDữ liệu của bạn luôn an toàn và có thể truy cập được."
         }
       }
@@ -2905,7 +2907,7 @@
     "change-password-description": "Đổi mật khẩu của bạn.",
     "delete-account": "Xóa tài khoản",
     "delete-account-description": "Xóa tài khoản của bạn.",
-    "delete-account-message": "Tài khoản của bạn sẽ bị xoá vĩnh viễn và không thể phục hồi. Nhập địa chỉ email của bạn để xác nhận xoá tài khoản.",
+    "delete-account-message": "Tài khoản của bạn sẽ bị xóa vĩnh viễn và không thể phục hồi. Nhập địa chỉ email của bạn để xác nhận xoá tài khoản.",
     "new_avatar": "Hình đại diện mới",
     "upload_avatar": "Hình đại diện mới",
     "remove_avatar": "Xóa hình đại diện",

apps/upskii/src/app/[locale]/(dashboard)/[wsId]/ai-chat/chat.tsx

@@ -331,7 +331,12 @@
             {t('common.coming_soon')} ✨
           </div>
         ) : (
-          <EmptyScreen chats={chats} setInput={setInput} locale={locale} />
+          <EmptyScreen
+            chats={chats}
+            setInput={setInput}
+            locale={locale}
+            hasApiKey={!!initialApiKey}
+          />
         )}
       </div>
 

apps/upskii/src/components/chat-panel.tsx

@@ -17,6 +17,7 @@
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import React, { useState } from 'react';
 
 interface PresenceUser {
@@ -189,11 +190,27 @@
                 : t('chat_visibility')}
           </DialogTitle>
           <DialogDescription>
-            {dialogType === 'files'
-              ? t('upload_file_description')
-              : dialogType === 'api'
-                ? t('api_input_description')
-                : t('chat_visibility_description')}
+            {dialogType === 'files' ? (
+              t('upload_file_description')
+            ) : dialogType === 'api' ? (
+              <span className="flex flex-col gap-2">
+                {t('api_input_description')}
+                <br />
+                <span className="flex items-center gap-2">
+                  {t('get-api-key-from')}:
+                  <Link
+                    href="https://aistudio.google.com/app/apikey"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary underline hover:no-underline"
+                  >
+                    Google AI Studio
+                  </Link>
+                </span>
+              </span>
+            ) : (
+              t('chat_visibility_description')
+            )}
           </DialogDescription>
         </DialogHeader>
 

apps/upskii/src/components/empty-screen.tsx

@@ -14,14 +14,17 @@
 import 'dayjs/locale/vi';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
 
 export function EmptyScreen({
   // chats,
   setInput,
   locale,
+  hasApiKey,
 }: Pick<UseChatHelpers, 'setInput'> & {
   chats?: AIChat[];
   locale: string;
+  hasApiKey: boolean;
 }) {
   dayjs.extend(relativeTime);
   dayjs.locale(locale);
@@ -93,7 +96,13 @@
                   'w-full items-center justify-center gap-2 border p-2 text-left text-sm md:p-8',
                   message.color
                 )}
-                onClick={() => setInput(message.message)}
+                onClick={() => {
+                  if (hasApiKey) {
+                    setInput(message.message);
+                  } else {
+                    toast.error(t('api_key_required'));
+                  }
+                }}
               >
                 {message.icon}
                 <div className="line-clamp-1 break-all whitespace-normal">

apps/upskii/src/components/form-apikey.tsx

@@ -39,7 +39,9 @@
     apiKey: z
       .string()
       .min(1, { message: t('api-key-required') })
-      .regex(/^AIza[0-9A-Za-z\-_]{35}$/, { message: t('api-key-required') }),
+      .regex(/^AIza[0-9A-Za-z\-_]{35}$/, {
+        message: t('api-key-required-format'),
+      }),
   });
 
   const form = useForm({

apps/upskii/src/components/prompt-form.tsx

@@ -734,8 +734,8 @@
             onChange={(e) => setInput(e.target.value)}
             placeholder={
               disabled || !apiKey
-                ? t('ai_chat.imagine_placeholder')
-                : `${t('ai_chat.send_message')}.`
+                ? t('ai_chat.api_key_required')
+                : `${t('ai_chat.send_message')}`
             }
             spellCheck={false}
             maxRows={7}