(fix:chatbots) ui

frontend/src/locale/en.json

@@ -81,7 +81,8 @@
       "sourceDoc": "Source Document",
       "createNew": "Create New",
       "noData": "No existing Chatbots",
-      "deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?"
+      "deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?",
+      "description": "Here you can create and manage your chatbots. Chatbots can be deployed to websites as widgets or used inside your applications."
     },
     "analytics": {
       "label": "Analytics",

frontend/src/locale/es.json

@@ -81,7 +81,8 @@
       "sourceDoc": "Documento Fuente",
       "createNew": "Crear Nuevo",
       "noData": "No hay chatbots existentes",
-      "deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?"
+      "deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?",
+      "description": "Aquí puede crear y gestionar sus chatbots. Los chatbots se pueden implementar en sitios web como widgets o utilizarse dentro de sus aplicaciones."
     },
     "analytics": {
       "label": "Analítica",

frontend/src/locale/jp.json

@@ -80,7 +80,8 @@
       "sourceDoc": "ソースドキュメント",
       "createNew": "新規作成",
       "noData": "既存のチャットボットはありません",
-      "deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？"
+      "deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？",
+      "description": "ここでチャットボットを作成・管理できます。チャットボットはウィジェットとしてウェブサイトに導入したり、アプリケーション内で使用したりすることができます。"
     },
     "analytics": {
       "label": "分析",

frontend/src/locale/ru.json

@@ -81,7 +81,8 @@
       "sourceDoc": "Источник документа",
       "createNew": "Создать новый",
       "noData": "Нет существующих чатботов",
-      "deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?"
+      "deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?",
+      "description": "Здесь вы можете создавать и управлять чат-ботами. Чат-боты могут быть развернуты на веб-сайтах в виде виджетов или использоваться внутри ваших приложений."
     },
     "analytics": {
       "label": "Аналитика",

frontend/src/locale/zh-TW.json

@@ -81,7 +81,8 @@
       "sourceDoc": "來源文件",
       "createNew": "建立新的",
       "noData": "沒有現有的聊天機器人",
-      "deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？"
+      "deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？",
+      "description": "在這裡，您可以創建和管理您的聊天機器人。聊天機器人可以作為小部件部署到網站上，或在您的應用程序中使用。"
     },
     "analytics": {
       "label": "分析",

frontend/src/locale/zh.json

@@ -81,7 +81,8 @@
       "sourceDoc": "源文档",
       "createNew": "创建新的",
       "noData": "没有现有的聊天机器人",
-      "deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？"
+      "deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？",
+      "description": "在这里，您可以创建和管理您的聊天机器人。聊天机器人可以作为小部件部署到网站上，或在您的应用程序中使用。"
     },
     "analytics": {
       "label": "分析",

frontend/src/settings/APIKeys.tsx

@@ -98,9 +98,15 @@ export default function APIKeys() {
   }, []);
 
   return (
-    <div className="mt-8">
-      <div className="flex flex-col max-w-[876px]">
-        <div className="flex justify-end">
+    <div className="flex flex-col w-full mt-8">
+      <div className="flex flex-col w-full">
+        <div className="mb-6">
+          <h2 className="text-base font-medium text-sonic-silver">
+            {t('settings.apiKeys.description')}
+          </h2>
+        </div>
+        
+        <div className="flex justify-end mb-6">
           <button
             onClick={() => setCreateModal(true)}
             className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
@@ -108,6 +114,72 @@ export default function APIKeys() {
             {t('settings.apiKeys.createNew')}
           </button>
         </div>
+
+        <div className="w-full">
+          <div className="w-full border rounded-md border-silver dark:border-silver/40 overflow-hidden">
+            <table className="w-full table-fixed divide-y divide-silver dark:divide-silver/40">
+            <thead>
+        <tr className="border-b border-gray-300 dark:border-silver/40">
+          <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
+            {t('settings.apiKeys.name')}
+          </th>
+          <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
+            {t('settings.apiKeys.sourceDoc')}
+          </th>
+          <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[25%]">
+            {t('settings.apiKeys.key')}
+          </th>
+          <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[5%]">
+            <span className="sr-only">Actions</span>
+          </th>
+        </tr>
+      </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
+                {loading ? (
+                  <SkeletonLoader component="chatbot" />
+                ) : !apiKeys?.length ? (
+                  <tr>
+                    <td
+                      colSpan={4}
+                      className="p-4 text-gray-800 dark:text-neutral-200 text-center"
+                    >
+                      {t('settings.apiKeys.noData')}
+                    </td>
+                  </tr>
+                ) : (
+                  Array.isArray(apiKeys) &&
+                  apiKeys.map((element, index) => (
+                    <tr
+                      key={element.id}
+                      className="text-sm font-medium text-gray-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                    >
+                      <td className="p-4 truncate">{element.name}</td>
+                      <td className="p-4 truncate">{element.source}</td>
+                      <td className="p-4 truncate font-mono text-sm">
+                        {element.key}
+                      </td>
+                      <td className="p-4 text-center">
+                        <img
+                          src={Trash}
+                          alt={`Delete ${element.name}`}
+                          className="h-4 w-4 cursor-pointer hover:opacity-50 mx-auto"
+                          id={`img-${index}`}
+                          onClick={() =>
+                            setKeyToDelete({
+                              id: element.id,
+                              name: element.name,
+                            })
+                          }
+                        />
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
         {isCreateModalOpen && (
           <CreateAPIKeyModal
             createAPIKey={handleCreateKey}
@@ -132,76 +204,6 @@ export default function APIKeys() {
             handleCancel={() => setKeyToDelete(null)}
           />
         )}
-        <div className="mt-[27px] w-full">
-          <div className="w-full overflow-x-auto">
-            <div className="flex flex-col">
-              <div className="flex-grow">
-                <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
-                  <table className="min-w-full divide-y divide-silver dark:divide-silver/40">
-                    <thead>
-                      <tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.name')}
-                        </th>
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.sourceDoc')}
-                        </th>
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.key')}
-                        </th>
-                        <th
-                          scope="col"
-                          className="p-2"
-                          aria-label="Actions"
-                        ></th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
-                      {loading ? (
-                        <SkeletonLoader component="chatbot" />
-                      ) : !apiKeys?.length ? (
-                        <tr>
-                          <td
-                            colSpan={4}
-                            className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
-                          >
-                            {t('settings.apiKeys.noData')}
-                          </td>
-                        </tr>
-                      ) : (
-                        Array.isArray(apiKeys) &&
-                        apiKeys.map((element, index) => (
-                          <tr
-                            key={element.id}
-                            className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
-                          >
-                            <td className="p-2">{element.name}</td>
-                            <td className="p-2">{element.source}</td>
-                            <td className="p-2">{element.key}</td>
-                            <td className="p-2">
-                              <img
-                                src={Trash}
-                                alt={`Delete ${element.name}`}
-                                className="h-4 w-4 cursor-pointer hover:opacity-50 mx-auto"
-                                id={`img-${index}`}
-                                onClick={() =>
-                                  setKeyToDelete({
-                                    id: element.id,
-                                    name: element.name,
-                                  })
-                                }
-                              />
-                            </td>
-                          </tr>
-                        ))
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   );

frontend/src/settings/Documents.tsx

@@ -183,7 +183,7 @@ export default function Documents({
             {t('settings.documents.title')}
           </h2>
         </div>
-        <div className="my-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+        <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
           <div className="w-full sm:w-auto">
             <label htmlFor="document-search-input" className="sr-only">
               {t('settings.documents.searchPlaceholder')}
@@ -352,9 +352,15 @@ export default function Documents({
           isOnboarding={isOnboarding}
           renderTab={null}
           close={() => setModalState('INACTIVE')}
-          onSuccessfulUpload={() =>
-            refreshDocs(undefined, currentPage, rowsPerPage)
-          }
+          onSuccessfulUpload={() => {
+            getDocs()
+              .then((data) => {
+                dispatch(setSourceDocs(data));
+                // Then refresh paginated documents
+                return refreshDocs(undefined, currentPage, rowsPerPage);
+              })
+              .catch((error) => console.error('Error updating docs:', error));
+          }}
         />
       )}