Skip to content

D
dify
Unverified Commit 1de48f33 authored by Rhon Joe's avatar Rhon Joe Committed by GitHub
Browse files
Options

feat(web): service request return generics type (#1157)

parent 6b41a959
Expand all Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 181 deletions
web/app/components/datasets/create/step-two/index.tsx
View file @ 1de48f33
......@@ -487,8 +487,10 @@ const StepTwo = ({
<input
type="number"
className={s.input}
placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={max}
onChange={e => setMax(Number(e.target.value))}
placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''}
value={max}
min={1}
onChange={e => setMax(parseInt(e.target.value.replace(/^0+/, ''), 10))}
/>
</div>
</div>
......@@ -497,7 +499,7 @@ const StepTwo = ({
<div className={s.label}>{t('datasetCreation.stepTwo.rules')}</div>
{rules.map(rule => (
<div key={rule.id} className={s.ruleItem}>
<input id={rule.id} type="checkbox" defaultChecked={rule.enabled} onChange={() => ruleChangeHandle(rule.id)} className="w-4 h-4 rounded border-gray-300 text-blue-700 focus:ring-blue-700" />
<input id={rule.id} type="checkbox" checked={rule.enabled} onChange={() => ruleChangeHandle(rule.id)} className="w-4 h-4 rounded border-gray-300 text-blue-700 focus:ring-blue-700" />
<label htmlFor={rule.id} className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
</div>
))}
......
web/hooks/use-breakpoints.ts
View file @ 1de48f33
......@@ -8,20 +8,22 @@ export enum MediaType {
}
const useBreakpoints = () => {
const [width, setWidth] = React.useState(globalThis.innerWidth);
const [width, setWidth] = React.useState(globalThis.innerWidth)
const media = (() => {
if (width <= 640) return MediaType.mobile;
if (width <= 768) return MediaType.tablet;
return MediaType.pc;
})();
if (width <= 640)
return MediaType.mobile
if (width <= 768)
return MediaType.tablet
return MediaType.pc
})()
React.useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
const handleWindowResize = () => setWidth(window.innerWidth)
window.addEventListener('resize', handleWindowResize)
return () => window.removeEventListener('resize', handleWindowResize)
}, [])
return media;
return media
}
export default useBreakpoints
web/service/apps.ts
View file @ 1de48f33
......@@ -5,91 +5,91 @@ import type { CommonResponse } from '@/models/common'
import type { AppMode, ModelConfig } from '@/types/app'
export const fetchAppList: Fetcher<AppListResponse, { url: string; params?: Record<string, any> }> = ({ url, params }) => {
return get(url, { params }) as Promise<AppListResponse>
return get<AppListResponse>(url, { params })
}
export const fetchAppDetail: Fetcher<AppDetailResponse, { url: string; id: string }> = ({ url, id }) => {
return get(`${url}/${id}`) as Promise<AppDetailResponse>
return get<AppDetailResponse>(`${url}/${id}`)
}
export const fetchAppTemplates: Fetcher<AppTemplatesResponse, { url: string }> = ({ url }) => {
return get(url) as Promise<AppTemplatesResponse>
return get<AppTemplatesResponse>(url)
}
export const createApp: Fetcher<AppDetailResponse, { name: string; icon: string; icon_background: string; mode: AppMode; config?: ModelConfig }> = ({ name, icon, icon_background, mode, config }) => {
return post('apps', { body: { name, icon, icon_background, mode, model_config: config } }) as Promise<AppDetailResponse>
return post<AppDetailResponse>('apps', { body: { name, icon, icon_background, mode, model_config: config } })
}
export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
return del(`apps/${appID}`) as Promise<CommonResponse>
return del<CommonResponse>(`apps/${appID}`)
}
export const updateAppSiteStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, { body }) as Promise<AppDetailResponse>
return post<AppDetailResponse>(url, { body })
}
export const updateAppApiStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, { body }) as Promise<AppDetailResponse>
return post<AppDetailResponse>(url, { body })
}
// path: /apps/{appId}/rate-limit
export const updateAppRateLimit: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, { body }) as Promise<AppDetailResponse>
return post<AppDetailResponse>(url, { body })
}
export const updateAppSiteAccessToken: Fetcher<UpdateAppSiteCodeResponse, { url: string }> = ({ url }) => {
return post(url) as Promise<UpdateAppSiteCodeResponse>
return post<UpdateAppSiteCodeResponse>(url)
}
export const updateAppSiteConfig: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, { body }) as Promise<AppDetailResponse>
return post<AppDetailResponse>(url, { body })
}
export const getAppDailyConversations: Fetcher<AppDailyConversationsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, { params }) as Promise<AppDailyConversationsResponse>
return get<AppDailyConversationsResponse>(url, { params })
}
export const getAppStatistics: Fetcher<AppStatisticsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, { params }) as Promise<AppStatisticsResponse>
return get<AppStatisticsResponse>(url, { params })
}
export const getAppDailyEndUsers: Fetcher<AppDailyEndUsersResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, { params }) as Promise<AppDailyEndUsersResponse>
return get<AppDailyEndUsersResponse>(url, { params })
}
export const getAppTokenCosts: Fetcher<AppTokenCostsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, { params }) as Promise<AppTokenCostsResponse>
return get<AppTokenCostsResponse>(url, { params })
}
export const updateAppModelConfig: Fetcher<UpdateAppModelConfigResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, { body }) as Promise<UpdateAppModelConfigResponse>
return post<UpdateAppModelConfigResponse>(url, { body })
}
// For temp testing
export const fetchAppListNoMock: Fetcher<AppListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, params) as Promise<AppListResponse>
return get<AppListResponse>(url, params)
}
export const fetchApiKeysList: Fetcher<ApikeysListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return get(url, params) as Promise<ApikeysListResponse>
return get<ApikeysListResponse>(url, params)
}
export const delApikey: Fetcher<CommonResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
return del(url, params) as Promise<CommonResponse>
return del<CommonResponse>(url, params)
}
export const createApikey: Fetcher<CreateApiKeyResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
return post(url, body) as Promise<CreateApiKeyResponse>
return post<CreateApiKeyResponse>(url, body)
}
export const validateOpenAIKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
return post(url, { body }) as Promise<ValidateOpenAIKeyResponse>
return post<ValidateOpenAIKeyResponse>(url, { body })
}
export const updateOpenAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
return post(url, { body }) as Promise<UpdateOpenAIKeyResponse>
return post<UpdateOpenAIKeyResponse>(url, { body })
}
export const generationIntroduction: Fetcher<GenerationIntroductionResponse, { url: string; body: { prompt_template: string } }> = ({ url, body }) => {
return post(url, { body }) as Promise<GenerationIntroductionResponse>
return post<GenerationIntroductionResponse>(url, { body })
}
web/service/base.ts
View file @ 1de48f33
/* eslint-disable no-new, prefer-promise-reject-errors */
import { API_PREFIX, IS_CE_EDITION, PUBLIC_API_PREFIX } from '@/config'
import Toast from '@/app/components/base/toast'
import type { MessageEnd, ThoughtItem } from '@/app/components/app/chat/type'
......@@ -50,6 +49,17 @@ type IOtherOptions = {
getAbortController?: (abortController: AbortController) => void
}
type ResponseError = {
code: string
message: string
status: number
}
type FetchOptionType = Omit<RequestInit, 'body'> & {
params?: Record<string, any>
body?: BodyInit | Record<string, any> | null
}
function unicodeToChar(text: string) {
if (!text)
return ''
......@@ -146,17 +156,17 @@ const handleStream = (response: any, onData: IOnData, onCompleted?: IOnCompleted
read()
}
const baseFetch = (
const baseFetch = <T>(
url: string,
fetchOptions: any,
fetchOptions: FetchOptionType,
{
isPublicAPI = false,
bodyStringify = true,
needAllResponseContent,
deleteContentType,
}: IOtherOptions,
) => {
const options = Object.assign({}, baseOptions, fetchOptions)
): Promise<T> => {
const options: typeof baseOptions & FetchOptionType = Object.assign({}, baseOptions, fetchOptions)
if (isPublicAPI) {
const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0]
const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
......@@ -209,27 +219,27 @@ const baseFetch = (
}, TIME_OUT)
}),
new Promise((resolve, reject) => {
globalThis.fetch(urlWithPrefix, options)
.then((res: any) => {
globalThis.fetch(urlWithPrefix, options as RequestInit)
.then((res) => {
const resClone = res.clone()
// Error handler
if (!/^(2|3)\d{2}$/.test(res.status)) {
if (!/^(2|3)\d{2}$/.test(String(res.status))) {
const bodyJson = res.json()
switch (res.status) {
case 401: {
if (isPublicAPI) {
Toast.notify({ type: 'error', message: 'Invalid token' })
return bodyJson.then((data: any) => Promise.reject(data))
return bodyJson.then((data: T) => Promise.reject(data))
}
const loginUrl = `${globalThis.location.origin}/signin`
if (IS_CE_EDITION) {
bodyJson.then((data: any) => {
bodyJson.then((data: ResponseError) => {
if (data.code === 'not_setup') {
globalThis.location.href = `${globalThis.location.origin}/install`
}
else {
if (location.pathname === '/signin') {
bodyJson.then((data: any) => {
bodyJson.then((data: ResponseError) => {
Toast.notify({ type: 'error', message: data.message })
})
}
......@@ -238,27 +248,23 @@ const baseFetch = (
}
}
})
return Promise.reject()
return Promise.reject(Error('Unauthorized'))
}
globalThis.location.href = loginUrl
break
}
case 403:
new Promise(() => {
bodyJson.then((data: any) => {
bodyJson.then((data: ResponseError) => {
Toast.notify({ type: 'error', message: data.message })
if (data.code === 'already_setup')
globalThis.location.href = `${globalThis.location.origin}/signin`
})
})
break
// fall through
default:
new Promise(() => {
bodyJson.then((data: any) => {
bodyJson.then((data: ResponseError) => {
Toast.notify({ type: 'error', message: data.message })
})
})
}
return Promise.reject(resClone)
}
......@@ -270,7 +276,7 @@ const baseFetch = (
}
// return data
const data = options.headers.get('Content-type') === ContentType.download ? res.blob() : res.json()
const data: Promise<T> = options.headers.get('Content-type') === ContentType.download ? res.blob() : res.json()
resolve(needAllResponseContent ? resClone : data)
})
......@@ -279,7 +285,7 @@ const baseFetch = (
reject(err)
})
}),
])
]) as Promise<T>
}
export const upload = (options: any): Promise<any> => {
......@@ -315,7 +321,7 @@ export const upload = (options: any): Promise<any> => {
})
}
export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onError, getAbortController }: IOtherOptions) => {
export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onError, getAbortController }: IOtherOptions) => {
const abortController = new AbortController()
const options = Object.assign({}, baseOptions, {
......@@ -336,15 +342,12 @@ export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, o
if (body)
options.body = JSON.stringify(body)
globalThis.fetch(urlWithPrefix, options)
.then((res: any) => {
// debugger
if (!/^(2|3)\d{2}$/.test(res.status)) {
new Promise(() => {
globalThis.fetch(urlWithPrefix, options as RequestInit)
.then((res) => {
if (!/^(2|3)\d{2}$/.test(String(res.status))) {
res.json().then((data: any) => {
Toast.notify({ type: 'error', message: data.message || 'Server Error' })
})
})
onError?.('Server Error')
return
}
......@@ -365,47 +368,49 @@ export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, o
})
}
export const request = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return baseFetch(url, options, otherOptions || {})
// base request
export const request = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return baseFetch<T>(url, options, otherOptions || {})
}
export const get = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return request(url, Object.assign({}, options, { method: 'GET' }), otherOptions)
// request methods
export const get = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return request<T>(url, Object.assign({}, options, { method: 'GET' }), otherOptions)
}
// For public API
export const getPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return get(url, options, { ...otherOptions, isPublicAPI: true })
export const getPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return get<T>(url, options, { ...otherOptions, isPublicAPI: true })
}
export const post = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return request(url, Object.assign({}, options, { method: 'POST' }), otherOptions)
export const post = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return request<T>(url, Object.assign({}, options, { method: 'POST' }), otherOptions)
}
export const postPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return post(url, options, { ...otherOptions, isPublicAPI: true })
export const postPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return post<T>(url, options, { ...otherOptions, isPublicAPI: true })
}
export const put = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return request(url, Object.assign({}, options, { method: 'PUT' }), otherOptions)
export const put = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return request<T>(url, Object.assign({}, options, { method: 'PUT' }), otherOptions)
}
export const putPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return put(url, options, { ...otherOptions, isPublicAPI: true })
export const putPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return put<T>(url, options, { ...otherOptions, isPublicAPI: true })
}
export const del = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return request(url, Object.assign({}, options, { method: 'DELETE' }), otherOptions)
export const del = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return request<T>(url, Object.assign({}, options, { method: 'DELETE' }), otherOptions)
}
export const delPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return del(url, options, { ...otherOptions, isPublicAPI: true })
export const delPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return del<T>(url, options, { ...otherOptions, isPublicAPI: true })
}
export const patch = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return request(url, Object.assign({}, options, { method: 'PATCH' }), otherOptions)
export const patch = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return request<T>(url, Object.assign({}, options, { method: 'PATCH' }), otherOptions)
}
export const patchPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
return patch(url, options, { ...otherOptions, isPublicAPI: true })
export const patchPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
return patch<T>(url, options, { ...otherOptions, isPublicAPI: true })
}
web/service/common.ts
View file @ 1de48f33
This diff is collapsed.
web/service/datasets.ts
View file @ 1de48f33
This diff is collapsed.
web/service/log.ts
View file @ 1de48f33
......@@ -18,42 +18,42 @@ import type {
} from '@/models/log'
export const fetchConversationList: Fetcher<ConversationListResponse, { name: string; appId: string; params?: Record<string, any> }> = ({ appId, params }) => {
return get(`/console/api/apps/${appId}/messages`, params) as Promise<ConversationListResponse>
return get<ConversationListResponse>(`/console/api/apps/${appId}/messages`, params)
}
// (Text Generation Application) Session List
export const fetchCompletionConversations: Fetcher<CompletionConversationsResponse, { url: string; params?: CompletionConversationsRequest }> = ({ url, params }) => {
return get(url, { params }) as Promise<CompletionConversationsResponse>
return get<CompletionConversationsResponse>(url, { params })
}
// (Text Generation Application) Session Detail
export const fetchCompletionConversationDetail: Fetcher<CompletionConversationFullDetailResponse, { url: string }> = ({ url }) => {
return get(url, {}) as Promise<CompletionConversationFullDetailResponse>
return get<CompletionConversationFullDetailResponse>(url, {})
}
// (Chat Application) Session List
export const fetchChatConversations: Fetcher<ChatConversationsResponse, { url: string; params?: ChatConversationsRequest }> = ({ url, params }) => {
return get(url, { params }) as Promise<ChatConversationsResponse>
return get<ChatConversationsResponse>(url, { params })
}
// (Chat Application) Session Detail
export const fetchChatConversationDetail: Fetcher<ChatConversationFullDetailResponse, { url: string }> = ({ url }) => {
return get(url, {}) as Promise<ChatConversationFullDetailResponse>
return get<ChatConversationFullDetailResponse>(url, {})
}
// (Chat Application) Message list in one session
export const fetchChatMessages: Fetcher<ChatMessagesResponse, { url: string; params: ChatMessagesRequest }> = ({ url, params }) => {
return get(url, { params }) as Promise<ChatMessagesResponse>
return get<ChatMessagesResponse>(url, { params })
}
export const updateLogMessageFeedbacks: Fetcher<LogMessageFeedbacksResponse, { url: string; body: LogMessageFeedbacksRequest }> = ({ url, body }) => {
return post(url, { body }) as Promise<LogMessageFeedbacksResponse>
return post<LogMessageFeedbacksResponse>(url, { body })
}
export const updateLogMessageAnnotations: Fetcher<LogMessageAnnotationsResponse, { url: string; body: LogMessageAnnotationsRequest }> = ({ url, body }) => {
return post(url, { body }) as Promise<LogMessageAnnotationsResponse>
return post<LogMessageAnnotationsResponse>(url, { body })
}
export const fetchAnnotationsCount: Fetcher<AnnotationsCountResponse, { url: string }> = ({ url }) => {
return get(url) as Promise<AnnotationsCountResponse>
return get<AnnotationsCountResponse>(url)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment