From 8eae643911414be89dcafcec58a06d069d2c0be0 Mon Sep 17 00:00:00 2001 From: Rhon Joe Date: Wed, 27 Sep 2023 08:54:52 +0800 Subject: [PATCH] Fix App logs page modal show different model icon. (#1224) --- .../[appId]/overview/cardView.tsx | 6 ++-- web/app/(commonLayout)/apps/AppCard.tsx | 8 +++--- .../components/app/configuration/index.tsx | 19 +++++++------ web/app/components/app/log/list.tsx | 28 ++++++++++--------- web/i18n/lang/app-overview.en.ts | 2 +- web/i18n/lang/app-overview.zh.ts | 2 +- web/models/log.ts | 7 +++++ web/service/apps.ts | 4 +-- web/utils/var.ts | 26 ++++++++--------- 9 files changed, 56 insertions(+), 46 deletions(-) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx index 9bebc68f87..eb72675d02 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx @@ -38,9 +38,9 @@ const CardView: FC = ({ appId }) => { message ||= (type === 'success' ? 'modifiedSuccessfully' : 'modifiedUnsuccessfully') - if (type === 'success') { + if (type === 'success') mutate(detailParams) - } + notify({ type, message: t(`common.actionMsg.${message}`), @@ -79,7 +79,7 @@ const CardView: FC = ({ appId }) => { if (!err) localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1') - handleCallbackResult(err) + handleCallbackResult(err) } const onGenerateCode = async () => { diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx index f6e5990353..50b525dc9b 100644 --- a/web/app/(commonLayout)/apps/AppCard.tsx +++ b/web/app/(commonLayout)/apps/AppCard.tsx @@ -64,8 +64,8 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { const getAppDetail = async () => { setDetailState({ loading: true }) - const [err, res] = await asyncRunSafe( - fetchAppDetail({ url: '/apps', id: app.id }) as Promise, + const [err, res] = await asyncRunSafe( + fetchAppDetail({ url: '/apps', id: app.id }), ) if (!err) { setDetailState({ loading: false, detail: res }) @@ -76,11 +76,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { const onSaveSiteConfig = useCallback( async (params: ConfigParams) => { - const [err] = await asyncRunSafe( + const [err] = await asyncRunSafe( updateAppSiteConfig({ url: `/apps/${app.id}/site`, body: params, - }) as Promise, + }), ) if (!err) { notify({ diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx index 528b1347b7..c5973210f9 100644 --- a/web/app/components/app/configuration/index.tsx +++ b/web/app/components/app/configuration/index.tsx @@ -18,7 +18,6 @@ import Config from '@/app/components/app/configuration/config' import Debug from '@/app/components/app/configuration/debug' import Confirm from '@/app/components/base/confirm' import { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations' -import type { AppDetailResponse } from '@/models/app' import { ToastContext } from '@/app/components/base/toast' import { fetchAppDetail, updateAppModelConfig } from '@/service/apps' import { promptVariablesToUserInputsForm, userInputsFormToPromptVariables } from '@/utils/model-config' @@ -27,6 +26,11 @@ import AccountSetting from '@/app/components/header/account-setting' import { useProviderContext } from '@/context/provider-context' import { AppType } from '@/types/app' +type PublichConfig = { + modelConfig: ModelConfig + completionParams: CompletionParams +} + const Configuration: FC = () => { const { t } = useTranslation() const { notify } = useContext(ToastContext) @@ -37,10 +41,7 @@ const Configuration: FC = () => { const matched = pathname.match(/\/app\/([^/]+)/) const appId = (matched?.length && matched[1]) ? matched[1] : '' const [mode, setMode] = useState('') - const [publishedConfig, setPublishedConfig] = useState<{ - modelConfig: ModelConfig - completionParams: CompletionParams - } | null>(null) + const [publishedConfig, setPublishedConfig] = useState(null) const [conversationId, setConversationId] = useState('') const [introduction, setIntroduction] = useState('') @@ -100,13 +101,13 @@ const Configuration: FC = () => { const [dataSets, setDataSets] = useState([]) - const syncToPublishedConfig = (_publishedConfig: any) => { + const syncToPublishedConfig = (_publishedConfig: PublichConfig) => { const modelConfig = _publishedConfig.modelConfig setModelConfig(_publishedConfig.modelConfig) setCompletionParams(_publishedConfig.completionParams) setDataSets(modelConfig.dataSets || []) // feature - setIntroduction(modelConfig.opening_statement) + setIntroduction(modelConfig.opening_statement!) setMoreLikeThisConfig(modelConfig.more_like_this || { enabled: false, }) @@ -143,7 +144,7 @@ const Configuration: FC = () => { const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean() useEffect(() => { - (fetchAppDetail({ url: '/apps', id: appId }) as any).then(async (res: AppDetailResponse) => { + fetchAppDetail({ url: '/apps', id: appId }).then(async (res) => { setMode(res.mode) const modelConfig = res.model_config const model = res.model_config.model @@ -250,7 +251,7 @@ const Configuration: FC = () => { const [showConfirm, setShowConfirm] = useState(false) const resetAppConfig = () => { - syncToPublishedConfig(publishedConfig) + syncToPublishedConfig(publishedConfig!) setShowConfirm(false) } diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx index 2995b83f65..0dabb24b9f 100644 --- a/web/app/components/app/log/list.tsx +++ b/web/app/components/app/log/list.tsx @@ -1,5 +1,5 @@ 'use client' -import type { FC, SVGProps } from 'react' +import type { FC } from 'react' import React, { useEffect, useState } from 'react' // import type { Log } from '@/models/log' import useSWR from 'swr' @@ -30,6 +30,8 @@ import Tooltip from '@/app/components/base/tooltip' import { ToastContext } from '@/app/components/base/toast' import { fetchChatConversationDetail, fetchChatMessages, fetchCompletionConversationDetail, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log' import { TONE_LIST } from '@/config' +import ModelIcon from '@/app/components/app/configuration/config-model/model-icon' +import ModelName from '@/app/components/app/configuration/config-model/model-name' type IConversationList = { logs?: ChatConversationsResponse | CompletionConversationsResponse @@ -47,13 +49,6 @@ type IDrawerContext = { const DrawerContext = createContext({} as IDrawerContext) -export const OpenAIIcon = ({ className }: SVGProps) => { - return - - - -} - /** * Icon component with numbers */ @@ -171,9 +166,16 @@ function DetailPanel
{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')} -
{isChatMode ? detail.id : dayjs.unix(detail.created_at).format(t('appLog.dateTimeFormat'))}
+
{isChatMode ? detail.id : dayjs.unix(detail.created_at).format(t('appLog.dateTimeFormat') as string)}
+
+
+ +
-
{detail.model_config.model_id}
Tone of responses
{targetTone}
- {['temperature', 'top_p', 'presence_penalty', 'max_tokens'].map((param, index) => { + {['temperature', 'top_p', 'presence_penalty', 'max_tokens'].map((param: string, index: number) => { return
- {PARAM_MAP[param]} + {PARAM_MAP[param as keyof typeof PARAM_MAP]} {detail?.model_config.model?.completion_params?.[param] || '-'}
})} @@ -423,7 +425,7 @@ const ConversationList: FC = ({ logs, appDetail, onRefresh }) setCurrentConversation(log) }}> {!log.read_at && } - {dayjs.unix(log.created_at).format(t('appLog.dateTimeFormat'))} + {dayjs.unix(log.created_at).format(t('appLog.dateTimeFormat') as string)} {renderTdValue(endUser || defaultValue, !endUser)} {renderTdValue(leftValue || t('appLog.table.empty.noChat'), !leftValue, isChatMode && log.annotated)} diff --git a/web/i18n/lang/app-overview.en.ts b/web/i18n/lang/app-overview.en.ts index 0cfa25db61..9905761948 100644 --- a/web/i18n/lang/app-overview.en.ts +++ b/web/i18n/lang/app-overview.en.ts @@ -48,7 +48,7 @@ const translation = { copyright: 'Copyright', copyRightPlaceholder: 'Enter the name of the author or organization', privacyPolicy: 'Privacy Policy', - privacyPolicyPlaceholder: 'Enter the privacy policy', + privacyPolicyPlaceholder: 'Enter the privacy policy link', privacyPolicyTip: 'Helps visitors understand the data the application collects, see Dify\'s Privacy Policy.', }, }, diff --git a/web/i18n/lang/app-overview.zh.ts b/web/i18n/lang/app-overview.zh.ts index b04d7c8648..f2c3944198 100644 --- a/web/i18n/lang/app-overview.zh.ts +++ b/web/i18n/lang/app-overview.zh.ts @@ -48,7 +48,7 @@ const translation = { copyright: '版权', copyRightPlaceholder: '请输入作者或组织名称', privacyPolicy: '隐私政策', - privacyPolicyPlaceholder: '请输入隐私政策', + privacyPolicyPlaceholder: '请输入隐私政策链接', privacyPolicyTip: '帮助访问者了解该应用收集的数据，可参考 Dify 的隐私政策。', }, }, diff --git a/web/models/log.ts b/web/models/log.ts index 3e2d86be42..fd97f99f8a 100644 --- a/web/models/log.ts +++ b/web/models/log.ts @@ -29,6 +29,12 @@ export type CompletionParamsType = { frequency_penalty: number } +export type LogModelConfig = { + name: string + provider: string + completion_params: CompletionParamsType +} + export type ModelConfigDetail = { introduction: string prompt_template: string @@ -155,6 +161,7 @@ export type ChatConversationFullDetailResponse = Omit(url, { params }) } -export const fetchAppDetail: Fetcher = ({ url, id }) => { +export const fetchAppDetail = ({ url, id }: { url: string; id: string }) => { return get(`${url}/${id}`) } @@ -41,7 +41,7 @@ export const updateAppSiteAccessToken: Fetcher(url) } -export const updateAppSiteConfig: Fetcher }> = ({ url, body }) => { +export const updateAppSiteConfig = ({ url, body }: { url: string; body: Record }) => { return post(url, { body }) } diff --git a/web/utils/var.ts b/web/utils/var.ts index 44e2a7b93e..726c4b68ea 100644 --- a/web/utils/var.ts +++ b/web/utils/var.ts @@ -1,5 +1,5 @@ -import { VAR_ITEM_TEMPLATE, getMaxVarNameLength, zhRegex, emojiRegex, MAX_VAR_KEY_LENGHT } from "@/config" -const otherAllowedRegex = new RegExp(`^[a-zA-Z0-9_]+$`) +import { MAX_VAR_KEY_LENGHT, VAR_ITEM_TEMPLATE, getMaxVarNameLength } from '@/config' +const otherAllowedRegex = /^[a-zA-Z0-9_]+$/ export const getNewVar = (key: string) => { return { @@ -10,19 +10,19 @@ export const getNewVar = (key: string) => { } const checkKey = (key: string, canBeEmpty?: boolean) => { - if (key.length === 0 && !canBeEmpty) { + if (key.length === 0 && !canBeEmpty) return 'canNoBeEmpty' - } - if (canBeEmpty && key === '') { + + if (canBeEmpty && key === '') return true - } - if (key.length > MAX_VAR_KEY_LENGHT) { + + if (key.length > MAX_VAR_KEY_LENGHT) return 'tooLong' - } + if (otherAllowedRegex.test(key)) { - if (/[0-9]/.test(key[0])) { + if (/[0-9]/.test(key[0])) return 'notStartWithNumber' - } + return true } return 'notValid' @@ -33,9 +33,9 @@ export const checkKeys = (keys: string[], canBeEmpty?: boolean) => { let errorKey = '' let errorMessageKey = '' keys.forEach((key) => { - if (!isValid) { + if (!isValid) return - } + const res = checkKey(key, canBeEmpty) if (res !== true) { isValid = false @@ -44,4 +44,4 @@ export const checkKeys = (keys: string[], canBeEmpty?: boolean) => { } }) return { isValid, errorKey, errorMessageKey } -} \ No newline at end of file +}