iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: OpenAI settings UI & language

Browse Source 
Update the user interface for the OpenAI settings to be more informative and consistent. Improved language around "OpenAI API Settings" to be more accurate and less technical. Also added a helpful tip for using LM Studio as a provider.
This commit is contained in:
n4ze3m 2024-10-12 23:49:12 +05:30
parent 30eb320c19
commit 4b4036e0b0
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/locale/en/openai.json
View File

@ -1,6 +1,6 @@
{ {
"settings": "OpenAI API Settings", "settings": "OpenAI Compatible API",
"heading": "OpenAI API Settings", "heading": "OpenAI compatible API",
"subheading": "Manage and configure your OpenAI API Compatible providers here.", "subheading": "Manage and configure your OpenAI API Compatible providers here.",
"addBtn": "Add Provider", "addBtn": "Add Provider",
"table": { "table": {
@ -33,9 +33,10 @@
"title": "Model List", "title": "Model List",
"subheading": "Please select the models you want to use with this provider.", "subheading": "Please select the models you want to use with this provider.",
"success": "Successfully added new models." "success": "Successfully added new models."
} },
"tipLMStudio": "Page Assist will automatically fetch the models you loaded on LM Studio. You don't need to add them manually."
}, },
"addSuccess": "Provider added successfully.", "addSuccess": "Provider added successfully.",
"deleteSuccess": "Provider deleted successfully.", "deleteSuccess": "Provider deleted successfully.",
"updateSuccess": "Provider updated successfully.", "updateSuccess": "Provider updated successfully.",
"delete": "Delete", "delete": "Delete",

14
src/components/Option/Settings/openai.tsx
View File

@ -1,3 +1,9 @@
/**
* The `OpenAIApp` component is the main entry point for the OpenAI configuration management functionality in the application.
* It provides a user interface for adding, editing, deleting, and refetching OpenAI configurations.
* The component uses React Query to manage the state and perform CRUD operations on the OpenAI configurations.
* It also includes a modal for fetching the available models from the selected OpenAI configuration.
*/
import { Form, Input, Modal, Table, message, Tooltip, Select } from "antd" import { Form, Input, Modal, Table, message, Tooltip, Select } from "antd"
import { useState } from "react" import { useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
@ -8,7 +14,7 @@ import {
updateOpenAIConfig updateOpenAIConfig
} from "@/db/openai" } from "@/db/openai"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { Pencil, Trash2, RotateCwIcon, DownloadIcon } from "lucide-react" import { Pencil, Trash2, RotateCwIcon, DownloadIcon, AlertTriangle } from "lucide-react"
import { OpenAIFetchModel } from "./openai-fetch-model" import { OpenAIFetchModel } from "./openai-fetch-model"
import { OAI_API_PROVIDERS } from "@/utils/oai-api-providers" import { OAI_API_PROVIDERS } from "@/utils/oai-api-providers"
@ -245,7 +251,11 @@ export const OpenAIApp = () => {
placeholder={t("modal.apiKey.placeholder")} placeholder={t("modal.apiKey.placeholder")}
/> />
</Form.Item> </Form.Item>
{
provider === "lmstudio" && <div className="text-xs text-gray-600 dark:text-gray-400 mb-4">
{t("modal.tipLMStudio")}
</div>
}
<button <button
type="submit" type="submit"
className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50"> className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50">