Skip to content

D
dify
Commit a5a61197 authored by Jyong's avatar Jyong
Browse files
Options

Merge branch 'main' into feat/dataset-notion-import 

# Conflicts:
#	api/controllers/console/datasets/datasets_document.py
#	api/services/dataset_service.py
parents c77029e6 c67f626b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1130 additions and 724 deletions
api/controllers/console/datasets/datasets_document.py
View file @ a5a61197
......@@ -225,9 +225,10 @@ class DatasetDocumentListApi(Resource):
parser = reqparse.RequestParser()
parser.add_argument('indexing_technique', type=str, choices=Dataset.INDEXING_TECHNIQUE_LIST, nullable=False,
location='json')
parser.add_argument('data_source', type=dict, required=True, nullable=True, location='json')
parser.add_argument('process_rule', type=dict, required=True, nullable=True, location='json')
parser.add_argument('data_source', type=dict, required=False, location='json')
parser.add_argument('process_rule', type=dict, required=False, location='json')
parser.add_argument('duplicate', type=bool, nullable=False, location='json')
parser.add_argument('original_document_id', type=str, required=False, location='json')
args = parser.parse_args()
if not dataset.indexing_technique and not args['indexing_technique']:
......@@ -365,7 +366,9 @@ class DocumentIndexingStatusApi(DocumentResource):
for document in documents:
completed_segments = DocumentSegment.query \
.filter(DocumentSegment.completed_at.isnot(None),
DocumentSegment.document_id == str(document.id)) \
DocumentSegment.document_id == str(document.id),
DocumentSegment.status != 're_segment') \
)
.count()
total_segments = DocumentSegment.query \
.filter_by(document_id=str(document.id)) \
......
api/services/dataset_service.py
View file @ a5a61197
......@@ -12,7 +12,7 @@ from events.dataset_event import dataset_was_deleted
from events.document_event import document_was_deleted
from extensions.ext_database import db
from models.account import Account
from models.dataset import Dataset, Document, DatasetQuery, DatasetProcessRule, AppDatasetJoin
from models.dataset import Dataset, Document, DatasetQuery, DatasetProcessRule, AppDatasetJoin, DocumentSegment
from models.model import UploadFile
from models.source import DataSourceBinding
from services.errors.account import NoPermissionError
......@@ -21,6 +21,7 @@ from services.errors.document import DocumentIndexingError
from services.errors.file import FileNotExistsError
from tasks.deal_dataset_vector_index_task import deal_dataset_vector_index_task
from tasks.document_indexing_task import document_indexing_task
from tasks.document_indexing_update_task import document_indexing_update_task
class DatasetService:
......@@ -277,6 +278,14 @@ class DocumentService:
return document
@staticmethod
def get_document_by_id(document_id: str) -> Optional[Document]:
document = db.session.query(Document).filter(
Document.id == document_id
).first()
return document
@staticmethod
def get_document_by_dataset_id(dataset_id: str) -> List[Document]:
documents = db.session.query(Document).filter(
......@@ -373,7 +382,8 @@ class DocumentService:
if dataset.indexing_technique == 'high_quality':
IndexBuilder.get_default_service_context(dataset.tenant_id)
if 'original_document_id' in document_data and document_data["original_document_id"]:
document = DocumentService.update_document_with_dataset_id(dataset, document_data, account)
# save process rule
if not dataset_process_rule:
process_rule = document_data["process_rule"]
......@@ -476,6 +486,77 @@ class DocumentService:
)
return document
@staticmethod
def update_document_with_dataset_id(dataset: Dataset, document_data: dict,
account: Account, dataset_process_rule: Optional[DatasetProcessRule] = None,
created_from: str = 'web'):
document = DocumentService.get_document(dataset.id, document_data["original_document_id"])
if document.display_status != 'available':
raise ValueError("Document is not available")
# save process rule
if 'process_rule' in document_data and document_data['process_rule']:
process_rule = document_data["process_rule"]
if process_rule["mode"] == "custom":
dataset_process_rule = DatasetProcessRule(
dataset_id=dataset.id,
mode=process_rule["mode"],
rules=json.dumps(process_rule["rules"]),
created_by=account.id
)
elif process_rule["mode"] == "automatic":
dataset_process_rule = DatasetProcessRule(
dataset_id=dataset.id,
mode=process_rule["mode"],
rules=json.dumps(DatasetProcessRule.AUTOMATIC_RULES),
created_by=account.id
)
db.session.add(dataset_process_rule)
db.session.commit()
document.dataset_process_rule_id = dataset_process_rule.id
# update document data source
if 'data_source' in document_data and document_data['data_source']:
file_name = ''
data_source_info = {}
if document_data["data_source"]["type"] == "upload_file":
file_id = document_data["data_source"]["info"]
file = db.session.query(UploadFile).filter(
UploadFile.tenant_id == dataset.tenant_id,
UploadFile.id == file_id
).first()
# raise error if file not found
if not file:
raise FileNotExistsError()
file_name = file.name
data_source_info = {
"upload_file_id": file_id,
}
document.data_source_type = document_data["data_source"]["type"]
document.data_source_info = json.dumps(data_source_info)
document.name = file_name
# update document to be waiting
document.indexing_status = 'waiting'
document.completed_at = None
document.processing_started_at = None
document.parsing_completed_at = None
document.cleaning_completed_at = None
document.splitting_completed_at = None
document.updated_at = datetime.datetime.utcnow()
document.created_from = created_from
db.session.add(document)
db.session.commit()
# update document segment
update_params = {
DocumentSegment.status: 're_segment'
}
DocumentSegment.query.filter_by(document_id=document.id).update(update_params)
db.session.commit()
# trigger async task
document_indexing_update_task.delay(document.dataset_id, document.id)
return document
@staticmethod
def save_document_without_dataset_id(tenant_id: str, document_data: dict, account: Account):
# save dataset
......@@ -502,6 +583,21 @@ class DocumentService:
@classmethod
def document_create_args_validate(cls, args: dict):
if 'original_document_id' not in args or not args['original_document_id']:
DocumentService.data_source_args_validate(args)
DocumentService.process_rule_args_validate(args)
else:
if ('data_source' not in args and not args['data_source'])\
and ('process_rule' not in args and not args['process_rule']):
raise ValueError("Data source or Process rule is required")
else:
if 'data_source' in args and args['data_source']:
DocumentService.data_source_args_validate(args)
if 'process_rule' in args and args['process_rule']:
DocumentService.process_rule_args_validate(args)
@classmethod
def data_source_args_validate(cls, args: dict):
if 'data_source' not in args or not args['data_source']:
raise ValueError("Data source is required")
......@@ -518,6 +614,8 @@ class DocumentService:
if 'info' not in args['data_source'] or not args['data_source']['info']:
raise ValueError("Data source info is required")
@classmethod
def process_rule_args_validate(cls, args: dict):
if 'process_rule' not in args or not args['process_rule']:
raise ValueError("Process rule is required")
......
api/tasks/clean_document_task.py
View file @ a5a61197
......@@ -35,8 +35,7 @@ def clean_document_task(document_id: str, dataset_id: str):
index_node_ids = [segment.index_node_id for segment in segments]
# delete from vector index
if dataset.indexing_technique == "high_quality":
vector_index.del_nodes(index_node_ids)
vector_index.del_nodes(index_node_ids)
# delete from keyword index
if index_node_ids:
......
api/tasks/document_indexing_update_task.py 0 → 100644
View file @ a5a61197
import datetime
import logging
import time
import click
from celery import shared_task
from werkzeug.exceptions import NotFound
from core.index.keyword_table_index import KeywordTableIndex
from core.index.vector_index import VectorIndex
from core.indexing_runner import IndexingRunner, DocumentIsPausedException
from core.llm.error import ProviderTokenNotInitError
from extensions.ext_database import db
from models.dataset import Document, Dataset, DocumentSegment
@shared_task
def document_indexing_update_task(dataset_id: str, document_id: str):
"""
Async update document
:param dataset_id:
:param document_id:
Usage: document_indexing_update_task.delay(dataset_id, document_id)
"""
logging.info(click.style('Start update document: {}'.format(document_id), fg='green'))
start_at = time.perf_counter()
document = db.session.query(Document).filter(
Document.id == document_id,
Document.dataset_id == dataset_id
).first()
if not document:
raise NotFound('Document not found')
document.indexing_status = 'parsing'
document.processing_started_at = datetime.datetime.utcnow()
db.session.commit()
# delete all document segment and index
try:
dataset = db.session.query(Dataset).filter(Dataset.id == dataset_id).first()
if not dataset:
raise Exception('Dataset not found')
vector_index = VectorIndex(dataset=dataset)
keyword_table_index = KeywordTableIndex(dataset=dataset)
segments = db.session.query(DocumentSegment).filter(DocumentSegment.document_id == document_id).all()
index_node_ids = [segment.index_node_id for segment in segments]
# delete from vector index
vector_index.del_nodes(index_node_ids)
# delete from keyword index
if index_node_ids:
keyword_table_index.del_nodes(index_node_ids)
for segment in segments:
db.session.delete(segment)
end_at = time.perf_counter()
logging.info(
click.style('Cleaned document when document update data source or process rule: {} latency: {}'.format(document_id, end_at - start_at), fg='green'))
except Exception:
logging.exception("Cleaned document when document update data source or process rule failed")
try:
indexing_runner = IndexingRunner()
indexing_runner.run(document)
end_at = time.perf_counter()
logging.info(click.style('update document: {} latency: {}'.format(document.id, end_at - start_at), fg='green'))
except DocumentIsPausedException:
logging.info(click.style('Document update paused, document id: {}'.format(document.id), fg='yellow'))
except ProviderTokenNotInitError as e:
document.indexing_status = 'error'
document.error = str(e.description)
document.stopped_at = datetime.datetime.utcnow()
db.session.commit()
except Exception as e:
logging.exception("consume update document failed")
document.indexing_status = 'error'
document.error = str(e)
document.stopped_at = datetime.datetime.utcnow()
db.session.commit()
api/tasks/remove_document_from_index_task.py
View file @ a5a61197
......@@ -42,8 +42,7 @@ def remove_document_from_index_task(document_id: str):
keyword_table_index = KeywordTableIndex(dataset=dataset)
# delete from vector index
if dataset.indexing_technique == "high_quality":
vector_index.del_doc(document.id)
vector_index.del_doc(document.id)
# delete from keyword index
segments = db.session.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).all()
......
web/app/(commonLayout)/apps/AppCard.tsx
View file @ a5a61197
......@@ -21,7 +21,7 @@ export type AppCardProps = {
const AppCard = ({
app,
onDelete
onDelete,
}: AppCardProps) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
......
web/app/(commonLayout)/apps/Apps.tsx
View file @ a5a61197
......@@ -3,13 +3,13 @@
import { useEffect, useRef } from 'react'
import useSWRInfinite from 'swr/infinite'
import { debounce } from 'lodash-es'
import { useTranslation } from 'react-i18next'
import AppCard from './AppCard'
import NewAppCard from './NewAppCard'
import { AppListResponse } from '@/models/app'
import type { AppListResponse } from '@/models/app'
import { fetchAppList } from '@/service/apps'
import { useSelector } from '@/context/app-context'
import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
import { useTranslation } from 'react-i18next'
const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
if (!pageIndex || previousPageData.has_more)
......@@ -25,8 +25,8 @@ const Apps = () => {
const anchorRef = useRef<HTMLAnchorElement>(null)
useEffect(() => {
document.title = `${t('app.title')} - Dify`;
if(localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
document.title = `${t('app.title')} - Dify`
if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
mutate()
}
......@@ -41,9 +41,8 @@ const Apps = () => {
if (!loadingStateRef.current) {
const { scrollTop, clientHeight } = pageContainerRef.current!
const anchorOffset = anchorRef.current!.offsetTop
if (anchorOffset - scrollTop - clientHeight < 100) {
if (anchorOffset - scrollTop - clientHeight < 100)
setSize(size => size + 1)
}
}
}, 50)
......
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/settings/page.tsx 0 → 100644
View file @ a5a61197
import React from 'react'
import Settings from '@/app/components/datasets/documents/detail/settings'
export type IProps = {
params: { datasetId: string; documentId: string }
}
const DocumentSettings = async ({
params: { datasetId, documentId },
}: IProps) => {
return (
<Settings datasetId={datasetId} documentId={documentId} />
)
}
export default DocumentSettings
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
View file @ a5a61197
......@@ -164,7 +164,10 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
extraInfo={<ExtraInfo />}
iconType='dataset'
/>}
<DatasetDetailContext.Provider value={{ indexingTechnique: datasetRes?.indexing_technique }}>
<DatasetDetailContext.Provider value={{
indexingTechnique: datasetRes?.indexing_technique,
dataset: datasetRes,
}}>
<div className="bg-white grow">{children}</div>
</DatasetDetailContext.Provider>
</div>
......
web/app/(commonLayout)/datasets/DatasetCard.tsx
View file @ a5a61197
'use client'
import { useContext, useContextSelector } from 'use-context-selector'
import { useContext } from 'use-context-selector'
import Link from 'next/link'
import useSWR from 'swr'
import type { MouseEventHandler } from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import style from '../list.module.css'
import type { App } from '@/types/app'
import Confirm from '@/app/components/base/confirm'
import { ToastContext } from '@/app/components/base/toast'
import { deleteDataset, fetchDatasets } from '@/service/datasets'
import { deleteDataset } from '@/service/datasets'
import AppIcon from '@/app/components/base/app-icon'
import AppsContext from '@/context/app-context'
import { DataSet } from '@/models/datasets'
import classNames from 'classnames'
import type { DataSet } from '@/models/datasets'
export type DatasetCardProps = {
dataset: DataSet
......@@ -23,7 +20,7 @@ export type DatasetCardProps = {
const DatasetCard = ({
dataset,
onDelete
onDelete,
}: DatasetCardProps) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
......
web/app/(commonLayout)/datasets/Datasets.tsx
View file @ a5a61197
......@@ -2,12 +2,12 @@
import { useEffect, useRef } from 'react'
import useSWRInfinite from 'swr/infinite'
import { debounce } from 'lodash-es';
import { DataSetListResponse } from '@/models/datasets';
import { debounce } from 'lodash-es'
import NewDatasetCard from './NewDatasetCard'
import DatasetCard from './DatasetCard';
import { fetchDatasets } from '@/service/datasets';
import { useSelector } from '@/context/app-context';
import DatasetCard from './DatasetCard'
import type { DataSetListResponse } from '@/models/datasets'
import { fetchDatasets } from '@/service/datasets'
import { useSelector } from '@/context/app-context'
const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
if (!pageIndex || previousPageData.has_more)
......@@ -30,9 +30,8 @@ const Datasets = () => {
if (!loadingStateRef.current) {
const { scrollTop, clientHeight } = pageContainerRef.current!
const anchorOffset = anchorRef.current!.offsetTop
if (anchorOffset - scrollTop - clientHeight < 100) {
if (anchorOffset - scrollTop - clientHeight < 100)
setSize(size => size + 1)
}
}
}, 50)
......@@ -43,7 +42,7 @@ const Datasets = () => {
return (
<nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
{data?.map(({ data: datasets }) => datasets.map(dataset => (
<DatasetCard key={dataset.id} dataset={dataset} onDelete={mutate} />)
<DatasetCard key={dataset.id} dataset={dataset} onDelete={mutate} />),
))}
<NewDatasetCard ref={anchorRef} />
</nav>
......@@ -51,4 +50,3 @@ const Datasets = () => {
}
export default Datasets
web/app/(commonLayout)/explore/apps/page.tsx
View file @ a5a61197
import AppList from "@/app/components/explore/app-list"
import React from 'react'
import AppList from '@/app/components/explore/app-list'
const Apps = ({ }) => {
const Apps = () => {
return <AppList />
}
......
web/app/(commonLayout)/explore/installed/[appId]/page.tsx
View file @ a5a61197
import React, { FC } from 'react'
import type { FC } from 'react'
import React from 'react'
import Main from '@/app/components/explore/installed-app'
export interface IInstalledAppProps {
export type IInstalledAppProps = {
params: {
appId: string
}
}
const InstalledApp: FC<IInstalledAppProps> = ({ params: {appId} }) => {
const InstalledApp: FC<IInstalledAppProps> = ({ params: { appId } }) => {
return (
<Main id={appId} />
)
......
web/app/(shareLayout)/chat/[token]/page.tsx
View file @ a5a61197
......@@ -5,7 +5,6 @@ import type { IMainProps } from '@/app/components/share/chat'
import Main from '@/app/components/share/chat'
const Chat: FC<IMainProps> = () => {
return (
<Main />
)
......
web/app/components/app/configuration/config-model/index.tsx
View file @ a5a61197
'use client'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import React, { useEffect } from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import { useBoolean, useClickAway } from 'ahooks'
import { ChevronDownIcon, Cog8ToothIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
import ParamItem from './param-item'
import Radio from '@/app/components/base/radio'
import Panel from '@/app/components/base/panel'
import type { CompletionParams } from '@/models/debug'
import { Cog8ToothIcon, InformationCircleIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
import { AppType } from '@/types/app'
import { TONE_LIST } from '@/config'
import Toast from '@/app/components/base/toast'
......@@ -51,7 +51,7 @@ const ConifgModel: FC<IConifgModelProps> = ({
}) => {
const { t } = useTranslation()
const isChatApp = mode === AppType.chat
const availableModels = options.filter((item) => item.type === mode)
const availableModels = options.filter(item => item.type === mode)
const [isShowConfig, { setFalse: hideConfig, toggle: toogleShowConfig }] = useBoolean(false)
const configContentRef = React.useRef(null)
useClickAway(() => {
......@@ -116,14 +116,14 @@ const ConifgModel: FC<IConifgModelProps> = ({
onShowUseGPT4Confirm()
return
}
if(id !== 'gpt-4' && completionParams.max_tokens > 4000) {
if (id !== 'gpt-4' && completionParams.max_tokens > 4000) {
Toast.notify({
type: 'warning',
message: t('common.model.params.setToCurrentModelMaxTokenTip')
message: t('common.model.params.setToCurrentModelMaxTokenTip'),
})
onCompletionParamsChange({
...completionParams,
max_tokens: 4000
max_tokens: 4000,
})
}
setModelId(id)
......@@ -153,7 +153,7 @@ const ConifgModel: FC<IConifgModelProps> = ({
setToneId(id)
onCompletionParamsChange({
...tone.config,
max_tokens: completionParams.max_tokens
max_tokens: completionParams.max_tokens,
} as CompletionParams)
}
}
......@@ -178,7 +178,7 @@ const ConifgModel: FC<IConifgModelProps> = ({
return (
<div className='relative' ref={configContentRef}>
<div
className={cn(`flex items-center border h-8 px-2.5 space-x-2 rounded-lg`, disabled ? diabledStyle : ableStyle)}
className={cn('flex items-center border h-8 px-2.5 space-x-2 rounded-lg', disabled ? diabledStyle : ableStyle)}
onClick={() => !disabled && toogleShowConfig()}
>
<ModelIcon />
......@@ -206,14 +206,14 @@ const ConifgModel: FC<IConifgModelProps> = ({
<div className="flex items-center justify-between my-5 h-9">
<div>{t('appDebug.modelConfig.model')}</div>
{/* model selector */}
<div className="relative" style={{zIndex: 30}}>
<div ref={triggerRef} onClick={() => !selectModelDisabled && toogleOption()} className={cn(selectModelDisabled ? 'cursor-not-allowed' : 'cursor-pointer', "flex items-center h-9 px-3 space-x-2 rounded-lg bg-gray-50 ")}>
<div className="relative" style={{ zIndex: 30 }}>
<div ref={triggerRef} onClick={() => !selectModelDisabled && toogleOption()} className={cn(selectModelDisabled ? 'cursor-not-allowed' : 'cursor-pointer', 'flex items-center h-9 px-3 space-x-2 rounded-lg bg-gray-50 ')}>
<ModelIcon />
<div className="text-sm gray-900">{selectedModel?.name}</div>
{!selectModelDisabled && <ChevronDownIcon className={cn(isShowOption && 'rotate-180', 'w-[14px] h-[14px] text-gray-500')} />}
</div>
{isShowOption && (
<div className={cn(isChatApp ? 'w-[159px]' : 'w-[179px]', "absolute right-0 bg-gray-50 rounded-lg shadow")}>
<div className={cn(isChatApp ? 'w-[159px]' : 'w-[179px]', 'absolute right-0 bg-gray-50 rounded-lg shadow')}>
{availableModels.map(item => (
<div key={item.id} onClick={handleSelectModel(item.id)} className="flex items-center h-9 px-3 rounded-lg cursor-pointer hover:bg-gray-100">
<ModelIcon className='mr-2' />
......
web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
View file @ a5a61197
'use client'
import React, { FC, useEffect } from 'react'
import type { FC } from 'react'
import React, { useEffect } from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import Modal from '@/app/components/base/modal'
import { DataSet } from '@/models/datasets'
import Link from 'next/link'
import TypeIcon from '../type-icon'
import s from './style.module.css'
import Modal from '@/app/components/base/modal'
import type { DataSet } from '@/models/datasets'
import Button from '@/app/components/base/button'
import { fetchDatasets } from '@/service/datasets'
import Loading from '@/app/components/base/loading'
import { formatNumber } from '@/utils/format'
import Link from 'next/link'
import s from './style.module.css'
export interface ISelectDataSetProps {
export type ISelectDataSetProps = {
isShow: boolean
onClose: () => void
selectedIds: string[]
......@@ -37,20 +37,19 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
const { data } = await fetchDatasets({ url: '/datasets', params: { page: 1 } })
setDataSets(data)
setLoaded(true)
setSelected(data.filter((item) => selectedIds.includes(item.id)))
setSelected(data.filter(item => selectedIds.includes(item.id)))
})()
}, [])
const toggleSelect = (dataSet: DataSet) => {
const isSelected = selected.some((item) => item.id === dataSet.id)
const isSelected = selected.some(item => item.id === dataSet.id)
if (isSelected) {
setSelected(selected.filter((item) => item.id !== dataSet.id))
setSelected(selected.filter(item => item.id !== dataSet.id))
}
else {
if (canSelectMulti) {
if (canSelectMulti)
setSelected([...selected, dataSet])
} else {
else
setSelected([dataSet])
}
}
}
......@@ -74,7 +73,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
<div className='flex items-center justify-center mt-6 rounded-lg space-x-1 h-[128px] text-[13px] border'
style={{
background: 'rgba(0, 0, 0, 0.02)',
borderColor: 'rgba(0, 0, 0, 0.02'
borderColor: 'rgba(0, 0, 0, 0.02',
}}
>
<span className='text-gray-500'>{t('appDebug.feature.dataSet.noDataSet')}</span>
......@@ -85,7 +84,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
{datasets && datasets?.length > 0 && (
<>
<div className='mt-7 space-y-1 max-h-[286px] overflow-y-auto'>
{datasets.map((item) => (
{datasets.map(item => (
<div
key={item.id}
className={cn(s.item, selected.some(i => i.id === item.id) && s.selected, 'flex justify-between items-center h-10 px-2 rounded-lg bg-white border border-gray-200 cursor-pointer')}
......
web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
View file @ a5a61197
/* eslint-disable multiline-ternary */
'use client'
import React, { FC, useEffect, useRef, useState } from 'react'
import type { FC } from 'react'
import React, { useEffect, useRef, useState } from 'react'
import cn from 'classnames'
import { useContext } from 'use-context-selector'
import ConfigContext from '@/context/debug-configuration'
import produce from 'immer'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import ConfigContext from '@/context/debug-configuration'
import Panel from '@/app/components/app/configuration/base/feature-panel'
import Button from '@/app/components/base/button'
import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
......@@ -14,7 +16,7 @@ import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/conf
import { getNewVar } from '@/utils/var'
import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
export interface IOpeningStatementProps {
export type IOpeningStatementProps = {
promptTemplate: string
value: string
onChange: (value: string) => void
......@@ -25,7 +27,7 @@ const regex = /\{\{([^}]+)\}\}/g
const OpeningStatement: FC<IOpeningStatementProps> = ({
value = '',
onChange
onChange,
}) => {
const { t } = useTranslation()
const {
......@@ -60,8 +62,6 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
.replace(/>/g, '&gt;')
.replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
.replace(/\n/g, '<br />')
const handleEdit = () => {
setFocus()
......@@ -76,15 +76,15 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
const handleConfirm = () => {
const keys = getInputKeys(tempValue)
const promptKeys = promptVariables.map((item) => item.key)
const promptKeys = promptVariables.map(item => item.key)
let notIncludeKeys: string[] = []
if (promptKeys.length === 0) {
if (keys.length > 0) {
if (keys.length > 0)
notIncludeKeys = keys
}
} else {
notIncludeKeys = keys.filter((key) => !promptKeys.includes(key))
}
else {
notIncludeKeys = keys.filter(key => !promptKeys.includes(key))
}
if (notIncludeKeys.length > 0) {
......@@ -104,7 +104,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
const autoAddVar = () => {
const newModelConfig = produce(modelConfig, (draft) => {
draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map((key) => getNewVar(key))]
draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map(key => getNewVar(key))]
})
onChange(tempValue)
setModelConfig(newModelConfig)
......@@ -130,26 +130,30 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
isFocus={isFocus}
>
<div className='text-gray-700 text-sm'>
{(hasValue || (!hasValue && isFocus)) ? (
<>
{isFocus ? (
<textarea
ref={inputRef}
value={tempValue}
rows={3}
onChange={e => setTempValue(e.target.value)}
className="w-full px-0 text-sm border-0 bg-transparent focus:outline-none "
placeholder={t('appDebug.openingStatement.placeholder') as string}
>
</textarea>
) : (
<div dangerouslySetInnerHTML={{
__html: coloredContent
}}></div>
)}
{/* Operation Bar */}
{isFocus && (
{(hasValue || (!hasValue && isFocus))
? (
<>
{isFocus
? (
<textarea
ref={inputRef}
value={tempValue}
rows={3}
onChange={e => setTempValue(e.target.value)}
className="w-full px-0 text-sm border-0 bg-transparent focus:outline-none "
placeholder={t('appDebug.openingStatement.placeholder') as string}
>
</textarea>
)
: (
<div dangerouslySetInnerHTML={{
__html: coloredContent,
}}></div>
)}
{/* Operation Bar */}
{isFocus
&& (
<div className='mt-2 flex items-center justify-between'>
<div className='text-xs text-gray-500'>{t('appDebug.openingStatement.varTip')}</div>
......@@ -160,9 +164,9 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
</div>
)}
</>) : (
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
)}
</>) : (
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
)}
{isShowConfirmAddVar && (
<ConfirmAddVar
......
web/app/components/app/configuration/prompt-value-panel/index.tsx
View file @ a5a61197
......@@ -6,12 +6,12 @@ import { useContext } from 'use-context-selector'
import {
PlayIcon,
} from '@heroicons/react/24/solid'
import VarIcon from '../base/icons/var-icon'
import ConfigContext from '@/context/debug-configuration'
import type { PromptVariable } from '@/models/debug'
import { AppType } from '@/types/app'
import Select from '@/app/components/base/select'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import VarIcon from '../base/icons/var-icon'
import Button from '@/app/components/base/button'
export type IPromptValuePanelProps = {
......@@ -71,17 +71,19 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
</div>
<div className='mt-2 leading-normal'>
{
(promptTemplate && promptTemplate?.trim()) ? (
<div
className="max-h-48 overflow-y-auto text-sm text-gray-700 break-all"
dangerouslySetInnerHTML={{
__html: format(replaceStringWithValuesWithFormat(promptTemplate.replace(/</g, '&lt;').replace(/>/g, '&gt;'), promptVariables, inputs)),
}}
>
</div>
) : (
<div className='text-xs text-gray-500'>{t('appDebug.inputs.noPrompt')}</div>
)
(promptTemplate && promptTemplate?.trim())
? (
<div
className="max-h-48 overflow-y-auto text-sm text-gray-700 break-all"
dangerouslySetInnerHTML={{
__html: format(replaceStringWithValuesWithFormat(promptTemplate.replace(/</g, '&lt;').replace(/>/g, '&gt;'), promptVariables, inputs)),
}}
>
</div>
)
: (
<div className='text-xs text-gray-500'>{t('appDebug.inputs.noPrompt')}</div>
)
}
</div>
</div>
......@@ -105,37 +107,41 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
)}
</div>
{
promptVariables.length > 0 ? (
<div className="space-y-3 ">
{promptVariables.map(({ key, name, type, options, max_length, required }) => (
<div key={key} className="flex items-center justify-between">
<div className="mr-1 shrink-0 w-[120px] text-sm text-gray-900">{name || key}</div>
{type === 'select' ? (
<Select
className='w-full'
defaultValue={inputs[key] as string}
onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
items={(options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
) : (
<input
className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
type="text"
value={inputs[key] ? `${inputs[key]}` : ''}
onChange={(e) => { handleInputValueChange(key, e.target.value) }}
maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
promptVariables.length > 0
? (
<div className="space-y-3 ">
{promptVariables.map(({ key, name, type, options, max_length, required }) => (
<div key={key} className="flex items-center justify-between">
<div className="mr-1 shrink-0 w-[120px] text-sm text-gray-900">{name || key}</div>
{type === 'select'
? (
<Select
className='w-full'
defaultValue={inputs[key] as string}
onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
items={(options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
)
: (
<input
className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
type="text"
value={inputs[key] ? `${inputs[key]}` : ''}
onChange={(e) => { handleInputValueChange(key, e.target.value) }}
maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
</div>
))}
</div>
) : (
<div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
)
</div>
))}
</div>
)
: (
<div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
)
}
</div>
......
web/app/components/base/app-icon/index.tsx
View file @ a5a61197
import type { FC } from 'react'
import classNames from 'classnames'
import style from './style.module.css'
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'
import style from './style.module.css'
init({ data })
......@@ -39,7 +39,7 @@ const AppIcon: FC<AppIconProps> = ({
}}
onClick={onClick}
>
{innerIcon ? innerIcon : icon && icon !== '' ? <em-emoji id={icon} /> : <em-emoji id='🤖' />}
{innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)}
</span>
)
}
......
web/app/components/base/block-input/index.tsx
View file @ a5a61197
......@@ -3,11 +3,11 @@
import type { ChangeEvent, FC } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import classNames from 'classnames'
import { checkKeys } from '@/utils/var'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import Toast from '../toast'
import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
import Button from '@/app/components/base/button'
import { checkKeys } from '@/utils/var'
// regex to match the {{}} and replace it with a span
const regex = /\{\{([^}]+)\}\}/g
......@@ -55,9 +55,9 @@ const BlockInput: FC<IBlockInputProps> = ({
useEffect(() => {
if (isEditing && contentEditableRef.current) {
// TODO: Focus at the click positon
if (currentValue) {
if (currentValue)
contentEditableRef.current.setSelectionRange(currentValue.length, currentValue.length)
}
contentEditableRef.current.focus()
}
}, [isEditing])
......@@ -72,7 +72,6 @@ const BlockInput: FC<IBlockInputProps> = ({
.replace(/>/g, '&gt;')
.replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
.replace(/\n/g, '<br />')
// Not use useCallback. That will cause out callback get old data.
const handleSubmit = () => {
......@@ -83,7 +82,7 @@ const BlockInput: FC<IBlockInputProps> = ({
if (!isValid) {
Toast.notify({
type: 'error',
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey })
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
})
return
}
......@@ -125,9 +124,9 @@ const BlockInput: FC<IBlockInputProps> = ({
value={currentValue}
onBlur={() => {
blur()
if (!isContentChanged) {
if (!isContentChanged)
setIsEditing(false)
}
// click confirm also make blur. Then outter value is change. So below code has problem.
// setTimeout(() => {
// handleCancel()
......@@ -143,31 +142,33 @@ const BlockInput: FC<IBlockInputProps> = ({
{textAreaContent}
{/* footer */}
<div className='flex item-center h-14 px-4'>
{isContentChanged ? (
<div className='flex items-center justify-between w-full'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
<div className='flex space-x-2'>
<Button
onClick={handleCancel}
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.cancel')}
</Button>
<Button
onClick={handleSubmit}
type="primary"
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.confirm')}
</Button>
</div>
{isContentChanged
? (
<div className='flex items-center justify-between w-full'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
<div className='flex space-x-2'>
<Button
onClick={handleCancel}
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.cancel')}
</Button>
<Button
onClick={handleSubmit}
type="primary"
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.confirm')}
</Button>
</div>
</div>
) : (
<p className="leading-5 text-xs text-gray-500">
{t('appDebug.promptTip')}
</p>
)}
</div>
)
: (
<p className="leading-5 text-xs text-gray-500">
{t('appDebug.promptTip')}
</p>
)}
</div>
</div>
......
web/app/components/base/emoji-picker/index.tsx
View file @ a5a61197
/* eslint-disable multiline-ternary */
'use client'
import React from 'react'
import { useState, FC, ChangeEvent } from 'react'
import type { ChangeEvent, FC } from 'react'
import React, { useState } from 'react'
import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'
import { SearchIndex, init } from 'emoji-mart'
import cn from 'classnames'
import Divider from '@/app/components/base/divider'
import Button from '@/app/components/base/button'
import s from './style.module.css'
import {
MagnifyingGlassIcon
MagnifyingGlassIcon,
} from '@heroicons/react/24/outline'
import { useTranslation } from 'react-i18next'
import s from './style.module.css'
import Divider from '@/app/components/base/divider'
import Button from '@/app/components/base/button'
import Modal from '@/app/components/base/modal'
import { useTranslation } from 'react-i18next'
declare global {
namespace JSX {
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
interface IntrinsicElements {
'em-emoji': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
>;
React.HTMLAttributes<HTMLElement>,
HTMLElement
>
}
}
}
......@@ -57,7 +59,7 @@ const backgroundColors = [
'#ECE9FE',
'#FFE4E8',
]
interface IEmojiPickerProps {
type IEmojiPickerProps = {
isModal?: boolean
onSelect?: (emoji: string, background: string) => void
onClose?: () => void
......@@ -66,7 +68,7 @@ interface IEmojiPickerProps {
const EmojiPicker: FC<IEmojiPickerProps> = ({
isModal = true,
onSelect,
onClose
onClose,
}) => {
const { t } = useTranslation()
......@@ -97,8 +99,8 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
onChange={async (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.value === '') {
setIsSearching(false)
return
} else {
}
else {
setIsSearching(true)
const emojis = await search(e.target.value)
setSearchedEmojis(emojis)
......@@ -111,7 +113,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
<div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
{isSearching && <>
<div key={`category-search`} className='flex flex-col'>
<div key={'category-search'} className='flex flex-col'>
<p className='font-medium uppercase text-xs text-[#101828] mb-1'>Search</p>
<div className='w-full h-full grid grid-cols-8 gap-1'>
{searchedEmojis.map((emoji: string, index: number) => {
......@@ -131,7 +133,6 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
</div>
</>}
{categories.map((category: any, index: number) => {
return <div key={`category-${index}`} className='flex flex-col'>
<p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
......@@ -156,7 +157,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
</div>
{/* Color Select */}
<div className={cn('p-3 ', selectedEmoji == '' ? 'opacity-25' : '')}>
<div className={cn('p-3 ', selectedEmoji === '' ? 'opacity-25' : '')}>
<p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
<div className='w-full h-full grid grid-cols-8 gap-1'>
{backgroundColors.map((color) => {
......@@ -165,9 +166,9 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
className={
cn(
'cursor-pointer',
`hover:ring-1 ring-offset-1`,
'hover:ring-1 ring-offset-1',
'inline-flex w-10 h-10 rounded-lg items-center justify-center',
color === selectedBackground ? `ring-1 ring-gray-300` : '',
color === selectedBackground ? 'ring-1 ring-gray-300' : '',
)}
onClick={() => {
setSelectedBackground(color)
......@@ -191,7 +192,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
{t('app.emoji.cancel')}
</Button>
<Button
disabled={selectedEmoji == ''}
disabled={selectedEmoji === ''}
type="primary"
className='w-full'
onClick={() => {
......
web/app/components/datasets/create/step-two/index.tsx
View file @ a5a61197
......@@ -9,7 +9,7 @@ import {
createDocument,
fetchFileIndexingEstimate as didFetchFileIndexingEstimate,
} from '@/service/datasets'
import type { CreateDocumentReq, createDocumentResponse } from '@/models/datasets'
import type { CreateDocumentReq, createDocumentResponse, FullDocumentDetail } from '@/models/datasets'
import Button from '@/app/components/base/button'
import PreviewItem from './preview-item'
import Loading from '@/app/components/base/loading'
......@@ -22,14 +22,18 @@ import Toast from '@/app/components/base/toast'
import { formatNumber } from '@/utils/format'
type StepTwoProps = {
isSetting?: boolean,
documentDetail?: FullDocumentDetail
hasSetAPIKEY: boolean,
onSetting: () => void,
datasetId?: string,
indexingType?: string,
file?: File,
onStepChange: (delta: number) => void,
updateIndexingTypeCache: (type: string) => void,
updateResultCache: (res: createDocumentResponse) => void
onStepChange?: (delta: number) => void,
updateIndexingTypeCache?: (type: string) => void,
updateResultCache?: (res: createDocumentResponse) => void
onSave?: () => void
onCancel?: () => void
}
enum SegmentType {
......@@ -42,6 +46,8 @@ enum IndexingType {
}
const StepTwo = ({
isSetting,
documentDetail,
hasSetAPIKEY,
onSetting,
datasetId,
......@@ -50,6 +56,8 @@ const StepTwo = ({
onStepChange,
updateIndexingTypeCache,
updateResultCache,
onSave,
onCancel,
}: StepTwoProps) => {
const { t } = useTranslation()
const scrollRef = useRef<HTMLDivElement>(null)
......@@ -171,15 +179,23 @@ const StepTwo = ({
}
const getCreationParams = () => {
const params = {
data_source: {
type: 'upload_file',
info: file?.id,
name: file?.name,
},
indexing_technique: getIndexing_technique(),
process_rule: getProcessRule(),
} as CreateDocumentReq
let params
if (isSetting) {
params = {
original_document_id: documentDetail?.id,
process_rule: getProcessRule(),
} as CreateDocumentReq
} else {
params = {
data_source: {
type: 'upload_file',
info: file?.id,
name: file?.name,
},
indexing_technique: getIndexing_technique(),
process_rule: getProcessRule(),
} as CreateDocumentReq
}
return params
}
......@@ -196,6 +212,25 @@ const StepTwo = ({
console.log(err)
}
}
const getRulesFromDetail = () => {
if (documentDetail) {
const rules = documentDetail.dataset_process_rule.rules
const separator = rules.segmentation.separator
const max = rules.segmentation.max_tokens
setSegmentIdentifier(separator === '\n' ? '\\n' : separator || '\\n')
setMax(max)
setRules(rules.pre_processing_rules)
setDefaultConfig(rules)
}
}
const getDefaultMode = () => {
if (documentDetail) {
setSegmentationType(documentDetail.dataset_process_rule.mode)
}
}
const createHandle = async () => {
try {
let res;
......@@ -204,19 +239,20 @@ const StepTwo = ({
res = await createFirstDocument({
body: params
})
updateIndexingTypeCache(indexType)
updateResultCache(res)
updateIndexingTypeCache && updateIndexingTypeCache(indexType)
updateResultCache && updateResultCache(res)
} else {
res = await createDocument({
datasetId,
body: params
})
updateIndexingTypeCache(indexType)
updateResultCache({
updateIndexingTypeCache && updateIndexingTypeCache(indexType)
updateResultCache && updateResultCache({
document: res,
})
}
onStepChange(+1)
onStepChange && onStepChange(+1)
isSetting && onSave && onSave()
}
catch (err) {
Toast.notify({
......@@ -228,7 +264,12 @@ const StepTwo = ({
useEffect(() => {
// fetch rules
getRules()
if (!isSetting) {
getRules()
} else {
getRulesFromDetail()
getDefaultMode()
}
}, [])
useEffect(() => {
......@@ -444,11 +485,18 @@ const StepTwo = ({
</div>
</div>
</div>
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
<div className={s.divider} />
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
{!isSetting ? (
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
<div className={s.divider} />
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
) : (
<div className='flex items-center mt-8 py-2'>
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}
</div>
</div>
</div>
......
web/app/components/datasets/documents/detail/embedding/index.tsx
View file @ a5a61197
......@@ -19,7 +19,7 @@ import type { FullDocumentDetail, ProcessRuleResponse } from '@/models/datasets'
import type { CommonResponse } from '@/models/common'
import { asyncRunSafe } from '@/utils'
import { formatNumber } from '@/utils/format'
import { fetchIndexingEstimate, fetchIndexingStatus, fetchProcessRule, pauseDocIndexing, resumeDocIndexing } from '@/service/datasets'
import { fetchIndexingEstimate, fetchProcessRule, pauseDocIndexing, resumeDocIndexing } from '@/service/datasets'
import DatasetDetailContext from '@/context/dataset-detail'
import StopEmbeddingModal from '@/app/components/datasets/create/stop-embedding-modal'
......@@ -118,14 +118,45 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
const localDocumentId = docId ?? documentId
const localIndexingTechnique = indexingType ?? indexingTechnique
const { data: indexingStatusDetail, error: indexingStatusErr, mutate: statusMutate } = useSWR({
action: 'fetchIndexingStatus',
datasetId: localDatasetId,
documentId: localDocumentId,
}, apiParams => fetchIndexingStatus(omit(apiParams, 'action')), {
refreshInterval: 5000,
revalidateOnFocus: false,
})
// const { data: indexingStatusDetailFromApi, error: indexingStatusErr, mutate: statusMutate } = useSWR({
// action: 'fetchIndexingStatus',
// datasetId: localDatasetId,
// documentId: localDocumentId,
// }, apiParams => fetchIndexingStatus(omit(apiParams, 'action')), {
// refreshInterval: 2500,
// revalidateOnFocus: false,
// })
const [indexingStatusDetail, setIndexingStatusDetail, getIndexingStatusDetail] = useGetState<any>(null)
const fetchIndexingStatus = async () => {
const status = await doFetchIndexingStatus({ datasetId: localDatasetId, documentId: localDocumentId })
setIndexingStatusDetail(status)
}
const [runId, setRunId, getRunId] = useGetState<any>(null)
const startQueryStatus = () => {
const runId = setInterval(() => {
const indexingStatusDetail = getIndexingStatusDetail()
if (indexingStatusDetail?.indexing_status === 'completed') {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
stopQueryStatus()
return
}
fetchIndexingStatus()
}, 2500)
setRunId(runId)
}
const stopQueryStatus = () => {
clearInterval(getRunId())
}
useEffect(() => {
fetchIndexingStatus()
startQueryStatus()
return () => {
stopQueryStatus()
}
}, [])
const { data: indexingEstimateDetail, error: indexingEstimateErr } = useSWR({
action: 'fetchIndexingEstimate',
......@@ -168,7 +199,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId: localDatasetId, documentId: localDocumentId }) as Promise<CommonResponse>)
if (!e) {
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
statusMutate()
setIndexingStatusDetail(null)
}
else {
notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
......
web/app/components/datasets/documents/detail/settings/index.tsx 0 → 100644
View file @ a5a61197
'use client'
import React, { useState, useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import { useContext } from 'use-context-selector'
import { useRouter } from 'next/navigation'
import DatasetDetailContext from '@/context/dataset-detail'
import type { FullDocumentDetail } from '@/models/datasets'
import { fetchTenantInfo } from '@/service/common'
import { fetchDocumentDetail, MetadataType } from '@/service/datasets'
import Loading from '@/app/components/base/loading'
import StepTwo from '@/app/components/datasets/create/step-two'
import AccountSetting from '@/app/components/header/account-setting'
import AppUnavailable from '@/app/components/base/app-unavailable'
type DocumentSettingsProps = {
datasetId: string;
documentId: string;
}
const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
const { t } = useTranslation()
const router = useRouter()
const [hasSetAPIKEY, setHasSetAPIKEY] = useState(true)
const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
const [hasError, setHasError] = useState(false)
const { indexingTechnique, dataset } = useContext(DatasetDetailContext)
const saveHandler = () => router.push(`/datasets/${datasetId}/documents/${documentId}`)
const cancelHandler = () => router.back()
const checkAPIKey = async () => {
const data = await fetchTenantInfo({ url: '/info' })
const hasSetKey = data.providers.some(({ is_valid }) => is_valid)
setHasSetAPIKEY(hasSetKey)
}
useEffect(() => {
checkAPIKey()
}, [])
const [documentDetail, setDocumentDetail] = useState<FullDocumentDetail | null>(null)
useEffect(() => {
(async () => {
try {
const detail = await fetchDocumentDetail({
datasetId,
documentId,
params: { metadata: 'without' as MetadataType }
})
setDocumentDetail(detail)
} catch (e) {
setHasError(true)
}
})()
}, [datasetId, documentId])
if (hasError) {
return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
}
return (
<div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
<div className="grow bg-white">
{!documentDetail && <Loading type='app' />}
{dataset && documentDetail && (
<StepTwo
hasSetAPIKEY={hasSetAPIKEY}
onSetting={showSetAPIKey}
datasetId={datasetId}
indexingType={indexingTechnique || ''}
isSetting
documentDetail={documentDetail}
file={documentDetail.data_source_info.upload_file}
onSave={saveHandler}
onCancel={cancelHandler}
/>
)}
</div>
{isShowSetAPIKey && <AccountSetting activeTab="provider" onCancel={async () => {
await checkAPIKey()
hideSetAPIkey()
}} />}
</div>
)
}
export default DocumentSettings
web/app/components/datasets/documents/list.tsx
View file @ a5a61197
......@@ -95,6 +95,7 @@ export const OperationAction: FC<{
const [showModal, setShowModal] = useState(false)
const { notify } = useContext(ToastContext)
const { t } = useTranslation()
const router = useRouter()
const isListScene = scene === 'list'
......@@ -166,15 +167,19 @@ export const OperationAction: FC<{
</div>
<Divider />
</>}
{/* <div className={s.actionItem}>
<SettingsIcon />
<span className={s.actionName}>{t('datasetDocuments.list.action.settings')}</span>
</div>
<div className={s.actionItem} onClick={() => router.push(`/datasets/${datasetId}/documents/create`)}>
<FilePlusIcon />
<span className={s.actionName}>{t('datasetDocuments.list.action.uploadFile')}</span>
</div>
<Divider className='my-1' /> */}
{!archived && (
<>
<div className={s.actionItem} onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
<SettingsIcon />
<span className={s.actionName}>{t('datasetDocuments.list.action.settings')}</span>
</div>
{/* <div className={s.actionItem} onClick={() => router.push(`/datasets/${datasetId}/documents/create`)}>
<FilePlusIcon />
<span className={s.actionName}>{t('datasetDocuments.list.action.uploadFile')}</span>
</div> */}
<Divider className='my-1' />
</>
)}
{!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
<ArchiveIcon />
<span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
......
web/app/components/datasets/documents/style.module.css
View file @ a5a61197
......@@ -72,7 +72,7 @@
.txtIcon {
background-image: url(./assets/txt.svg);
}
.mdIcon {
.markdownIcon {
background-image: url(./assets/md.svg);
}
.statusItemDetail {
......
web/app/components/datasets/settings/form/index.tsx
View file @ a5a61197
'use client'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import useSWR from 'swr'
import { useContext } from 'use-context-selector'
import { BookOpenIcon } from '@heroicons/react/24/outline'
import { useTranslation } from 'react-i18next'
import { ToastContext } from '@/app/components/base/toast'
import PermissionsRadio from '../permissions-radio'
import IndexMethodRadio from '../index-method-radio'
import { ToastContext } from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
import { updateDatasetSetting, fetchDataDetail } from '@/service/datasets'
import { DataSet } from '@/models/datasets'
import { fetchDataDetail, updateDatasetSetting } from '@/service/datasets'
import type { DataSet } from '@/models/datasets'
const rowClass = `
flex justify-between py-4
......@@ -20,8 +20,7 @@ const labelClass = `
const inputClass = `
w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
`
const useInitialValue = <T,>(depend: T, dispatch: Dispatch<SetStateAction<T>>) => {
const useInitialValue = (depend: any, dispatch: any) => {
useEffect(() => {
dispatch(depend)
}, [depend])
......@@ -32,7 +31,7 @@ type Props = {
}
const Form = ({
datasetId
datasetId,
}: Props) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
......@@ -44,7 +43,8 @@ const Form = ({
const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique)
const handleSave = async () => {
if (loading) return
if (loading)
return
if (!name?.trim()) {
notify({ type: 'error', message: t('datasetSettings.form.nameError') })
return
......@@ -57,14 +57,16 @@ const Form = ({
name,
description,
permission,
indexing_technique: indexMethod
}
indexing_technique: indexMethod,
},
})
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
await mutateDatasets()
} catch (e) {
}
catch (e) {
notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
} finally {
}
finally {
setLoading(false)
}
}
......@@ -142,4 +144,4 @@ const Form = ({
)
}
export default Form
\ No newline at end of file
export default Form
web/app/components/develop/secret-key/input-copy.tsx
View file @ a5a61197
'use client'
import React, { useEffect, useState } from 'react'
import copy from 'copy-to-clipboard'
import Tooltip from '@/app/components/base/tooltip'
import { t } from 'i18next'
import s from './style.module.css'
import Tooltip from '@/app/components/base/tooltip'
type IInputCopyProps = {
value?: string
......
web/app/components/explore/app-list/index.tsx
View file @ a5a61197
'use client'
import React, { FC, useEffect } from 'react'
import type { FC } from 'react'
import React, { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import Toast from '../../base/toast'
import s from './style.module.css'
import ExploreContext from '@/context/explore-context'
import { App } from '@/models/explore'
import type { App } from '@/models/explore'
import Category from '@/app/components/explore/category'
import AppCard from '@/app/components/explore/app-card'
import { fetchAppList, installApp, fetchAppDetail } from '@/service/explore'
import { fetchAppDetail, fetchAppList, installApp } from '@/service/explore'
import { createApp } from '@/service/apps'
import CreateAppModal from '@/app/components/explore/create-app-modal'
import Loading from '@/app/components/base/loading'
import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
import s from './style.module.css'
import Toast from '../../base/toast'
const Apps: FC = ({ }) => {
const Apps: FC = () => {
const { t } = useTranslation()
const router = useRouter()
const { setControlUpdateInstalledApps, hasEditPermission } = useContext(ExploreContext)
......@@ -25,13 +25,14 @@ const Apps: FC = ({ }) => {
const [isLoaded, setIsLoaded] = React.useState(false)
const currList = (() => {
if(currCategory === '') return allList
if (currCategory === '')
return allList
return allList.filter(item => item.category === currCategory)
})()
const [categories, setCategories] = React.useState([])
useEffect(() => {
(async () => {
const {categories, recommended_apps}:any = await fetchAppList()
const { categories, recommended_apps }: any = await fetchAppList()
setCategories(categories)
setAllList(recommended_apps)
setIsLoaded(true)
......@@ -49,9 +50,9 @@ const Apps: FC = ({ }) => {
const [currApp, setCurrApp] = React.useState<App | null>(null)
const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
const onCreate = async ({name, icon, icon_background}: any) => {
const onCreate = async ({ name, icon, icon_background }: any) => {
const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
try {
const app = await createApp({
name,
......@@ -67,12 +68,13 @@ const Apps: FC = ({ }) => {
})
localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
router.push(`/app/${app.id}/overview`)
} catch (e) {
}
catch (e) {
Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
}
}
if(!isLoaded) {
if (!isLoaded) {
return (
<div className='flex h-full items-center'>
<Loading type='area' />
......@@ -92,16 +94,16 @@ const Apps: FC = ({ }) => {
value={currCategory}
onChange={setCurrCategory}
/>
<div
<div
className='flex mt-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'
style={{
maxHeight: 'calc(100vh - 243px)'
maxHeight: 'calc(100vh - 243px)',
}}
>
<nav
className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10grow shrink-0`}>
{currList.map(app => (
<AppCard
<AppCard
key={app.app_id}
app={app}
canCreate={hasEditPermission}
......@@ -116,13 +118,13 @@ const Apps: FC = ({ }) => {
</div>
{isShowCreateModal && (
<CreateAppModal
appName={currApp?.app.name || ''}
show={isShowCreateModal}
onConfirm={onCreate}
onHide={() => setIsShowCreateModal(false)}
/>
)}
<CreateAppModal
appName={currApp?.app.name || ''}
show={isShowCreateModal}
onConfirm={onCreate}
onHide={() => setIsShowCreateModal(false)}
/>
)}
</div>
)
}
......
web/app/components/explore/category.tsx
View file @ a5a61197
'use client'
import React, { FC } from 'react'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import exploreI18n from '@/i18n/lang/explore.en'
import cn from 'classnames'
import exploreI18n from '@/i18n/lang/explore.en'
const categoryI18n = exploreI18n.category
export interface ICategoryProps {
export type ICategoryProps = {
className?: string
list: string[]
value: string
......@@ -17,23 +18,23 @@ const Category: FC<ICategoryProps> = ({
className,
list,
value,
onChange
onChange,
}) => {
const { t } = useTranslation()
const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium','flex items-center h-7 px-3 border cursor-pointer rounded-lg')
const itemStyle = (isSelected: boolean) => isSelected ? {boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'} : {}
const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium', 'flex items-center h-7 px-3 border cursor-pointer rounded-lg')
const itemStyle = (isSelected: boolean) => isSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}
return (
<div className={cn(className, 'flex space-x-1 text-[13px]')}>
<div
className={itemClassName('' === value)}
style={itemStyle('' === value)}
onClick={() => onChange('')}
>
{t('explore.apps.allCategories')}
</div>
<div
className={itemClassName(value === '')}
style={itemStyle(value === '')}
onClick={() => onChange('')}
>
{t('explore.apps.allCategories')}
</div>
{list.map(name => (
<div
<div
key={name}
className={itemClassName(name === value)}
style={itemStyle(name === value)}
......
web/app/components/explore/create-app-modal/index.tsx
View file @ a5a61197
......@@ -2,19 +2,18 @@
import React, { useState } from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import s from './style.module.css'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Toast from '@/app/components/base/toast'
import AppIcon from '@/app/components/base/app-icon'
import EmojiPicker from '@/app/components/base/emoji-picker'
import s from './style.module.css'
type IProps = {
appName: string,
show: boolean,
onConfirm: (info: any) => void,
onHide: () => void,
appName: string
show: boolean
onConfirm: (info: any) => void
onHide: () => void
}
const CreateAppModal = ({
......@@ -31,7 +30,7 @@ const CreateAppModal = ({
const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
const submit = () => {
if(!name.trim()) {
if (!name.trim()) {
Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
return
}
......@@ -44,42 +43,42 @@ const CreateAppModal = ({
return (
<>
<Modal
isShow={show}
onClose={onHide}
className={cn(s.modal, '!max-w-[480px]', 'px-8')}
>
<span className={s.close} onClick={onHide}/>
<div className={s.title}>{t('explore.appCustomize.title', {name: appName})}</div>
<div className={s.content}>
<div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
<div className='flex items-center justify-between space-x-3'>
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
<input
value={name}
onChange={e => setName(e.target.value)}
className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
/>
<Modal
isShow={show}
onClose={onHide}
className={cn(s.modal, '!max-w-[480px]', 'px-8')}
>
<span className={s.close} onClick={onHide}/>
<div className={s.title}>{t('explore.appCustomize.title', { name: appName })}</div>
<div className={s.content}>
<div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
<div className='flex items-center justify-between space-x-3'>
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
<input
value={name}
onChange={e => setName(e.target.value)}
className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
/>
</div>
</div>
</div>
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
</div>
</Modal>
{showEmojiPicker && <EmojiPicker
onSelect={(icon, icon_background) => {
console.log(icon, icon_background)
setEmoji({ icon, icon_background })
setShowEmojiPicker(false)
}}
onClose={() => {
setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
setShowEmojiPicker(false)
}}
/>}
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
</div>
</Modal>
{showEmojiPicker && <EmojiPicker
onSelect={(icon, icon_background) => {
console.log(icon, icon_background)
setEmoji({ icon, icon_background })
setShowEmojiPicker(false)
}}
onClose={() => {
setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
setShowEmojiPicker(false)
}}
/>}
</>
)
}
......
web/app/components/explore/index.tsx
View file @ a5a61197
'use client'
import React, { FC, useEffect, useState } from 'react'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ExploreContext from '@/context/explore-context'
import Sidebar from '@/app/components/explore/sidebar'
import { useAppContext } from '@/context/app-context'
import { fetchMembers } from '@/service/common'
import { InstalledApp } from '@/models/explore'
import { useTranslation } from 'react-i18next'
import type { InstalledApp } from '@/models/explore'
export interface IExploreProps {
export type IExploreProps = {
children: React.ReactNode
}
const Explore: FC<IExploreProps> = ({
children
children,
}) => {
const { t } = useTranslation()
const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
......@@ -23,8 +24,9 @@ const Explore: FC<IExploreProps> = ({
useEffect(() => {
document.title = `${t('explore.title')} - Dify`;
(async () => {
const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {}})
if(!accounts) return
const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
if (!accounts)
return
const currUser = accounts.find(account => account.id === userProfile.id)
setHasEditPermission(currUser?.role !== 'normal')
})()
......@@ -39,7 +41,7 @@ const Explore: FC<IExploreProps> = ({
setControlUpdateInstalledApps,
hasEditPermission,
installedApps,
setInstalledApps
setInstalledApps,
}
}
>
......
web/app/components/explore/installed-app/index.tsx
View file @ a5a61197
'use client'
import React, { FC } from 'react'
import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import ExploreContext from '@/context/explore-context'
import ChatApp from '@/app/components/share/chat'
import TextGenerationApp from '@/app/components/share/text-generation'
import Loading from '@/app/components/base/loading'
export interface IInstalledAppProps {
export type IInstalledAppProps = {
id: string
}
......@@ -14,23 +15,25 @@ const InstalledApp: FC<IInstalledAppProps> = ({
id,
}) => {
const { installedApps } = useContext(ExploreContext)
const installedApp = installedApps.find(item => item.id === id)
if(!installedApp) {
const installedApp = installedApps.find(item => item.id === id)
if (!installedApp) {
return (
<div className='flex h-full items-center'>
<Loading type='area' />
</div>
)
}
return (
<div className='h-full p-2'>
{installedApp?.app.mode === 'chat' ? (
<ChatApp isInstalledApp installedAppInfo={installedApp}/>
): (
<TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
)}
{installedApp?.app.mode === 'chat'
? (
<ChatApp isInstalledApp installedAppInfo={installedApp}/>
)
: (
<TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
)}
</div>
)
}
......
web/app/components/explore/item-operation/index.tsx
View file @ a5a61197
'use client'
import React, { FC } from 'react'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import Popover from '@/app/components/base/popover'
import { TrashIcon } from '@heroicons/react/24/outline'
import s from './style.module.css'
import Popover from '@/app/components/base/popover'
const PinIcon = (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
......@@ -13,7 +14,7 @@ const PinIcon = (
</svg>
)
export interface IItemOperationProps {
export type IItemOperationProps = {
className?: string
isPinned: boolean
isShowDelete: boolean
......@@ -26,7 +27,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
isPinned,
isShowDelete,
togglePin,
onDelete
onDelete,
}) => {
const { t } = useTranslation()
......@@ -42,18 +43,18 @@ const ItemOperation: FC<IItemOperationProps> = ({
</div>
{isShowDelete && (
<div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
<TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
<span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
</div>
<TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
<span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
</div>
)}
</div>
}
trigger='click'
position='br'
btnElement={<div />}
btnClassName={(open) => cn(className, s.btn, 'h-6 w-6 rounded-md border-none p-1', open && '!bg-gray-100 !shadow-none')}
className={`!w-[120px] h-fit !z-20`}
btnClassName={open => cn(className, s.btn, 'h-6 w-6 rounded-md border-none p-1', open && '!bg-gray-100 !shadow-none')}
className={'!w-[120px] h-fit !z-20'}
/>
)
}
......
web/app/components/explore/sidebar/app-nav-item/index.tsx
View file @ a5a61197
'use client'
import cn from 'classnames'
import { useRouter } from 'next/navigation'
import s from './style.module.css'
import ItemOperation from '@/app/components/explore/item-operation'
import AppIcon from '@/app/components/base/app-icon'
import s from './style.module.css'
export interface IAppNavItemProps {
export type IAppNavItemProps = {
name: string
id: string
icon: string
......@@ -31,7 +30,7 @@ export default function AppNavItem({
}: IAppNavItemProps) {
const router = useRouter()
const url = `/explore/installed/${id}`
return (
<div
key={id}
......@@ -40,7 +39,7 @@ export default function AppNavItem({
isSelected ? s.active : 'hover:bg-gray-200',
'flex h-8 justify-between px-2 rounded-lg text-sm font-normal ',
)}
onClick={() => {
onClick={() => {
router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
}}
>
......@@ -53,7 +52,7 @@ export default function AppNavItem({
borderColor: '0.5px solid rgba(0, 0, 0, 0.05)'
}}
/> */}
<AppIcon size='tiny' icon={icon} background={icon_background} />
<AppIcon size='tiny' icon={icon} background={icon_background} />
<div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
</div>
{
......
web/app/components/header/account-setting/provider-page/azure-provider/index.tsx
View file @ a5a61197
import type { Provider, ProviderAzureToken } from '@/models/common'
import { ProviderName } from '@/models/common'
import { useTranslation } from 'react-i18next'
import Link from 'next/link'
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
import { useState, useEffect } from 'react'
import { useEffect, useState } from 'react'
import ProviderInput from '../provider-input'
import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
import {
ValidatedErrorIcon,
import type { ValidatedStatusState } from '../provider-input/useValidateToken'
import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
import {
ValidatedErrorIcon,
ValidatedErrorOnAzureOpenaiTip,
ValidatedSuccessIcon,
ValidatingTip,
ValidatedErrorOnAzureOpenaiTip
} from '../provider-input/Validate'
import { ProviderName } from '@/models/common'
import type { Provider, ProviderAzureToken } from '@/models/common'
interface IAzureProviderProps {
type IAzureProviderProps = {
provider: Provider
onValidatedStatus: (status?: ValidatedStatusState) => void
onTokenChange: (token: ProviderAzureToken) => void
}
const AzureProvider = ({
provider,
provider,
onTokenChange,
onValidatedStatus
onValidatedStatus,
}: IAzureProviderProps) => {
const { t } = useTranslation()
const [token, setToken] = useState<ProviderAzureToken>(provider.provider_name === ProviderName.AZURE_OPENAI ? {...provider.token}: {})
const [ validating, validatedStatus, setValidatedStatus, validate ] = useValidateToken(provider.provider_name)
const [token, setToken] = useState<ProviderAzureToken>(provider.provider_name === ProviderName.AZURE_OPENAI ? { ...provider.token } : {})
const [validating, validatedStatus, setValidatedStatus, validate] = useValidateToken(provider.provider_name)
const handleFocus = (type: keyof ProviderAzureToken) => {
if (token[type] === (provider?.token as ProviderAzureToken)[type]) {
token[type] = ''
setToken({...token})
onTokenChange({...token})
setToken({ ...token })
onTokenChange({ ...token })
setValidatedStatus({})
}
}
const handleChange = (type: keyof ProviderAzureToken, v: string, validate: any) => {
token[type] = v
setToken({...token})
onTokenChange({...token})
validate({...token}, {
setToken({ ...token })
onTokenChange({ ...token })
validate({ ...token }, {
beforeValidating: () => {
if (!token.openai_api_base || !token.openai_api_key) {
setValidatedStatus({})
return false
}
return true
}
},
})
}
const getValidatedIcon = () => {
if (validatedStatus.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) {
if (validatedStatus.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed)
return <ValidatedErrorIcon />
}
if (validatedStatus.status === ValidatedStatus.Success) {
if (validatedStatus.status === ValidatedStatus.Success)
return <ValidatedSuccessIcon />
}
}
const getValidatedTip = () => {
if (validating) {
if (validating)
return <ValidatingTip />
}
if (validatedStatus.status === ValidatedStatus.Error) {
if (validatedStatus.status === ValidatedStatus.Error)
return <ValidatedErrorOnAzureOpenaiTip errorMessage={validatedStatus.message ?? ''} />
}
}
useEffect(() => {
if (typeof onValidatedStatus === 'function') {
if (typeof onValidatedStatus === 'function')
onValidatedStatus(validatedStatus)
}
}, [validatedStatus])
return (
<div className='px-4 py-3'>
<ProviderInput
<ProviderInput
className='mb-4'
name={t('common.provider.azure.apiBase')}
placeholder={t('common.provider.azure.apiBasePlaceholder')}
value={token.openai_api_base}
onChange={(v) => handleChange('openai_api_base', v, validate)}
onChange={v => handleChange('openai_api_base', v, validate)}
onFocus={() => handleFocus('openai_api_base')}
validatedIcon={getValidatedIcon()}
/>
<ProviderInput
<ProviderInput
className='mb-4'
name={t('common.provider.azure.apiKey')}
placeholder={t('common.provider.azure.apiKeyPlaceholder')}
value={token.openai_api_key}
onChange={(v) => handleChange('openai_api_key', v, validate)}
onChange={v => handleChange('openai_api_key', v, validate)}
onFocus={() => handleFocus('openai_api_key')}
validatedIcon={getValidatedIcon()}
validatedTip={getValidatedTip()}
......
web/app/components/header/account-setting/provider-page/index.tsx
View file @ a5a61197
import { useState } from 'react'
import useSWR from 'swr'
import { fetchProviders } from '@/service/common'
import ProviderItem from './provider-item'
import OpenaiHostedProvider from './openai-hosted-provider'
import type { ProviderHosted } from '@/models/common'
import { LockClosedIcon } from '@heroicons/react/24/solid'
import { useTranslation } from 'react-i18next'
import Link from 'next/link'
import ProviderItem from './provider-item'
import OpenaiHostedProvider from './openai-hosted-provider'
import type { ProviderHosted } from '@/models/common'
import { fetchProviders } from '@/service/common'
import { IS_CE_EDITION } from '@/config'
const providersMap: {[k: string]: any} = {
const providersMap: { [k: string]: any } = {
'openai-custom': {
icon: 'openai',
name: 'OpenAI',
......@@ -17,7 +17,7 @@ const providersMap: {[k: string]: any} = {
'azure_openai-custom': {
icon: 'azure',
name: 'Azure OpenAI Service',
}
},
}
// const providersList = [
......@@ -56,7 +56,7 @@ const ProviderPage = () => {
const { t } = useTranslation()
const [activeProviderId, setActiveProviderId] = useState('')
const { data, mutate } = useSWR({ url: '/workspaces/current/providers' }, fetchProviders)
const providers = data?.filter(provider => providersMap[`${provider.provider_name}-${provider.provider_type}`])?.map(provider => {
const providers = data?.filter(provider => providersMap[`${provider.provider_name}-${provider.provider_type}`])?.map((provider) => {
const providerKey = `${provider.provider_name}-${provider.provider_type}`
return {
provider,
......
web/app/components/header/account-setting/provider-page/openai-provider/index.tsx
View file @ a5a61197
import type { Provider } from '@/models/common'
import { useState, useEffect } from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ProviderInput from '../provider-input'
import Link from 'next/link'
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
import {
ValidatedErrorIcon,
import ProviderInput from '../provider-input'
import type { ValidatedStatusState } from '../provider-input/useValidateToken'
import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
import {
ValidatedErrorIcon,
ValidatedErrorOnOpenaiTip,
ValidatedSuccessIcon,
ValidatingTip,
ValidatedExceedOnOpenaiTip,
ValidatedErrorOnOpenaiTip
} from '../provider-input/Validate'
import type { Provider } from '@/models/common'
interface IOpenaiProviderProps {
type IOpenaiProviderProps = {
provider: Provider
onValidatedStatus: (status?: ValidatedStatusState) => void
onTokenChange: (token: string) => void
......@@ -22,11 +22,11 @@ interface IOpenaiProviderProps {
const OpenaiProvider = ({
provider,
onValidatedStatus,
onTokenChange
onTokenChange,
}: IOpenaiProviderProps) => {
const { t } = useTranslation()
const [token, setToken] = useState(provider.token as string || '')
const [ validating, validatedStatus, setValidatedStatus, validate ] = useValidateToken(provider.provider_name)
const [validating, validatedStatus, setValidatedStatus, validate] = useValidateToken(provider.provider_name)
const handleFocus = () => {
if (token === provider.token) {
setToken('')
......@@ -44,35 +44,32 @@ const OpenaiProvider = ({
return false
}
return true
}
},
})
}
useEffect(() => {
if (typeof onValidatedStatus === 'function') {
if (typeof onValidatedStatus === 'function')
onValidatedStatus(validatedStatus)
}
}, [validatedStatus])
const getValidatedIcon = () => {
if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) {
if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed)
return <ValidatedErrorIcon />
}
if (validatedStatus.status === ValidatedStatus.Success) {
if (validatedStatus.status === ValidatedStatus.Success)
return <ValidatedSuccessIcon />
}
}
const getValidatedTip = () => {
if (validating) {
if (validating)
return <ValidatingTip />
}
if (validatedStatus?.status === ValidatedStatus.Error) {
if (validatedStatus?.status === ValidatedStatus.Error)
return <ValidatedErrorOnOpenaiTip errorMessage={validatedStatus.message ?? ''} />
}
}
return (
<div className='px-4 pt-3 pb-4'>
<ProviderInput
<ProviderInput
value={token}
name={t('common.provider.apiKey')}
placeholder={t('common.provider.enterYourKey')}
......@@ -89,4 +86,4 @@ const OpenaiProvider = ({
)
}
export default OpenaiProvider
\ No newline at end of file
export default OpenaiProvider
web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx
View file @ a5a61197
......@@ -15,7 +15,7 @@ export const ValidatedSuccessIcon = () => {
export const ValidatingTip = () => {
const { t } = useTranslation()
return (
<div className={`mt-2 text-primary-600 text-xs font-normal`}>
<div className={'mt-2 text-primary-600 text-xs font-normal'}>
{t('common.provider.validating')}
</div>
)
......@@ -26,11 +26,11 @@ export const ValidatedExceedOnOpenaiTip = () => {
const { locale } = useContext(I18n)
return (
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
<div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
{t('common.provider.apiKeyExceedBill')}&nbsp;
<Link
<Link
className='underline'
href="https://platform.openai.com/account/api-keys"
href="https://platform.openai.com/account/api-keys"
target={'_blank'}>
{locale === 'en' ? 'this link' : '这篇文档'}
</Link>
......@@ -42,7 +42,7 @@ export const ValidatedErrorOnOpenaiTip = ({ errorMessage }: { errorMessage: stri
const { t } = useTranslation()
return (
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
<div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
{t('common.provider.validatedError')}{errorMessage}
</div>
)
......@@ -52,8 +52,8 @@ export const ValidatedErrorOnAzureOpenaiTip = ({ errorMessage }: { errorMessage:
const { t } = useTranslation()
return (
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
<div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
{t('common.provider.validatedError')}{errorMessage}
</div>
)
}
\ No newline at end of file
}
web/app/components/header/account-setting/provider-page/provider-input/index.tsx
View file @ a5a61197
import { ChangeEvent } from 'react'
import { ReactElement } from 'react-markdown/lib/react-markdown'
import type { ChangeEvent } from 'react'
import type { ReactElement } from 'react-markdown/lib/react-markdown'
interface IProviderInputProps {
type IProviderInputProps = {
value?: string
name: string
placeholder: string
......@@ -20,9 +20,8 @@ const ProviderInput = ({
onChange,
onFocus,
validatedIcon,
validatedTip
validatedTip,
}: IProviderInputProps) => {
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value
onChange(inputValue)
......@@ -35,12 +34,12 @@ const ProviderInput = ({
flex items-center px-3 bg-white rounded-lg
shadow-[0_1px_2px_rgba(16,24,40,0.05)]
'>
<input
<input
className='
w-full py-[9px]
text-xs font-medium text-gray-700 leading-[18px]
appearance-none outline-none bg-transparent
'
appearance-none outline-none bg-transparent
'
value={value}
placeholder={placeholder}
onChange={handleChange}
......@@ -53,4 +52,4 @@ const ProviderInput = ({
)
}
export default ProviderInput
\ No newline at end of file
export default ProviderInput
web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts
View file @ a5a61197
import { useState, useCallback, SetStateAction, Dispatch } from 'react'
import type { Dispatch, SetStateAction } from 'react'
import { useCallback, useState } from 'react'
import debounce from 'lodash-es/debounce'
import { DebouncedFunc } from 'lodash-es'
import type { DebouncedFunc } from 'lodash-es'
import { validateProviderKey } from '@/service/common'
export enum ValidatedStatus {
Success = 'success',
Error = 'error',
Exceed = 'exceed'
Exceed = 'exceed',
}
export type ValidatedStatusState = {
status?: ValidatedStatus,
status?: ValidatedStatus
message?: string
}
// export type ValidatedStatusState = ValidatedStatus | undefined | ValidatedError
export type SetValidatedStatus = Dispatch<SetStateAction<ValidatedStatusState>>
export type ValidateFn = DebouncedFunc<(token: any, config: ValidateFnConfig) => void>
type ValidateTokenReturn = [
boolean,
ValidatedStatusState,
boolean,
ValidatedStatusState,
SetValidatedStatus,
ValidateFn
ValidateFn,
]
export type ValidateFnConfig = {
beforeValidating: (token: any) => boolean
......@@ -29,19 +30,21 @@ const useValidateToken = (providerName: string): ValidateTokenReturn => {
const [validating, setValidating] = useState(false)
const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>({})
const validate = useCallback(debounce(async (token: string, config: ValidateFnConfig) => {
if (!config.beforeValidating(token)) {
if (!config.beforeValidating(token))
return false
}
setValidating(true)
try {
const res = await validateProviderKey({ url: `/workspaces/current/providers/${providerName}/token-validate`, body: { token } })
setValidatedStatus(
res.result === 'success'
? { status: ValidatedStatus.Success }
res.result === 'success'
? { status: ValidatedStatus.Success }
: { status: ValidatedStatus.Error, message: res.error })
} catch (e: any) {
}
catch (e: any) {
setValidatedStatus({ status: ValidatedStatus.Error, message: e.message })
} finally {
}
finally {
setValidating(false)
}
}, 500), [])
......@@ -50,8 +53,8 @@ const useValidateToken = (providerName: string): ValidateTokenReturn => {
validating,
validatedStatus,
setValidatedStatus,
validate
validate,
]
}
export default useValidateToken
\ No newline at end of file
export default useValidateToken
web/app/components/header/account-setting/provider-page/provider-item/index.tsx
View file @ a5a61197
import { useState } from 'react'
import cn from 'classnames'
import s from './index.module.css'
import { useContext } from 'use-context-selector'
import Indicator from '../../../indicator'
import { useTranslation } from 'react-i18next'
import type { Provider, ProviderAzureToken } from '@/models/common'
import { ProviderName } from '@/models/common'
import Indicator from '../../../indicator'
import OpenaiProvider from '../openai-provider'
import AzureProvider from '../azure-provider'
import { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
import type { ValidatedStatusState } from '../provider-input/useValidateToken'
import { ValidatedStatus } from '../provider-input/useValidateToken'
import s from './index.module.css'
import type { Provider, ProviderAzureToken } from '@/models/common'
import { ProviderName } from '@/models/common'
import { updateProviderAIKey } from '@/service/common'
import { ToastContext } from '@/app/components/base/toast'
interface IProviderItemProps {
type IProviderItemProps = {
icon: string
name: string
provider: Provider
......@@ -26,17 +27,17 @@ const ProviderItem = ({
name,
provider,
onActive,
onSave
onSave,
}: IProviderItemProps) => {
const { t } = useTranslation()
const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>()
const [loading, setLoading] = useState(false)
const { notify } = useContext(ToastContext)
const [token, setToken] = useState<ProviderAzureToken | string>(
provider.provider_name === 'azure_openai'
provider.provider_name === 'azure_openai'
? { openai_api_base: '', openai_api_key: '' }
: ''
)
: '',
)
const id = `${provider.provider_name}-${provider.provider_type}`
const isOpen = id === activeId
const comingSoon = false
......@@ -44,26 +45,30 @@ const ProviderItem = ({
const providerTokenHasSetted = () => {
if (provider.provider_name === ProviderName.AZURE_OPENAI) {
return provider.token && provider.token.openai_api_base && provider.token.openai_api_key ? {
openai_api_base: provider.token.openai_api_base,
openai_api_key: provider.token.openai_api_key
}: undefined
return (provider.token && provider.token.openai_api_base && provider.token.openai_api_key)
? {
openai_api_base: provider.token.openai_api_base,
openai_api_key: provider.token.openai_api_key,
}
: undefined
}
if (provider.provider_name === ProviderName.OPENAI) {
if (provider.provider_name === ProviderName.OPENAI)
return provider.token
}
}
const handleUpdateToken = async () => {
if (loading) return
if (loading)
return
if (validatedStatus?.status === ValidatedStatus.Success) {
try {
setLoading(true)
await updateProviderAIKey({ url: `/workspaces/current/providers/${provider.provider_name}/token`, body: { token } })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
onActive('')
} catch (e) {
}
catch (e) {
notify({ type: 'error', message: t('common.provider.saveFailed') })
} finally {
}
finally {
setLoading(false)
onSave()
}
......@@ -126,18 +131,18 @@ const ProviderItem = ({
</div>
{
provider.provider_name === ProviderName.OPENAI && isOpen && (
<OpenaiProvider
provider={provider}
onValidatedStatus={v => setValidatedStatus(v)}
<OpenaiProvider
provider={provider}
onValidatedStatus={v => setValidatedStatus(v)}
onTokenChange={v => setToken(v)}
/>
)
}
{
provider.provider_name === ProviderName.AZURE_OPENAI && isOpen && (
<AzureProvider
provider={provider}
onValidatedStatus={v => setValidatedStatus(v)}
<AzureProvider
provider={provider}
onValidatedStatus={v => setValidatedStatus(v)}
onTokenChange={v => setToken(v)}
/>
)
......
web/app/components/header/index.tsx
View file @ a5a61197
import type { FC } from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelectedLayoutSegment, useRouter } from 'next/navigation'
import { useRouter, useSelectedLayoutSegment } from 'next/navigation'
import classNames from 'classnames'
import { CircleStackIcon, PuzzlePieceIcon } from '@heroicons/react/24/outline'
import { CommandLineIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
......@@ -15,9 +15,9 @@ import NewAppDialog from '@/app/(commonLayout)/apps/NewAppDialog'
import { WorkspaceProvider } from '@/context/workspace-context'
import { useDatasetsContext } from '@/context/datasets-context'
const BuildAppsIcon = ({isSelected}: {isSelected: boolean}) => (
const BuildAppsIcon = ({ isSelected }: { isSelected: boolean }) => (
<svg className='mr-1' width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6666 4.85221L7.99998 8.00036M7.99998 8.00036L2.33331 4.85221M7.99998 8.00036L8 14.3337M14 10.7061V5.29468C14 5.06625 14 4.95204 13.9663 4.85017C13.9366 4.76005 13.8879 4.67733 13.8236 4.60754C13.7509 4.52865 13.651 4.47318 13.4514 4.36224L8.51802 1.6215C8.32895 1.51646 8.23442 1.46395 8.1343 1.44336C8.0457 1.42513 7.95431 1.42513 7.8657 1.44336C7.76559 1.46395 7.67105 1.51646 7.48198 1.6215L2.54865 4.36225C2.34896 4.47318 2.24912 4.52865 2.17642 4.60754C2.11211 4.67733 2.06343 4.76005 2.03366 4.85017C2 4.95204 2 5.06625 2 5.29468V10.7061C2 10.9345 2 11.0487 2.03366 11.1506C2.06343 11.2407 2.11211 11.3234 2.17642 11.3932C2.24912 11.4721 2.34897 11.5276 2.54865 11.6385L7.48198 14.3793C7.67105 14.4843 7.76559 14.5368 7.8657 14.5574C7.95431 14.5756 8.0457 14.5756 8.1343 14.5574C8.23442 14.5368 8.32895 14.4843 8.51802 14.3793L13.4514 11.6385C13.651 11.5276 13.7509 11.4721 13.8236 11.3932C13.8879 11.3234 13.9366 11.2407 13.9663 11.1506C14 11.0487 14 10.9345 14 10.7061Z" stroke={isSelected ? '#155EEF': '#667085'} strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M13.6666 4.85221L7.99998 8.00036M7.99998 8.00036L2.33331 4.85221M7.99998 8.00036L8 14.3337M14 10.7061V5.29468C14 5.06625 14 4.95204 13.9663 4.85017C13.9366 4.76005 13.8879 4.67733 13.8236 4.60754C13.7509 4.52865 13.651 4.47318 13.4514 4.36224L8.51802 1.6215C8.32895 1.51646 8.23442 1.46395 8.1343 1.44336C8.0457 1.42513 7.95431 1.42513 7.8657 1.44336C7.76559 1.46395 7.67105 1.51646 7.48198 1.6215L2.54865 4.36225C2.34896 4.47318 2.24912 4.52865 2.17642 4.60754C2.11211 4.67733 2.06343 4.76005 2.03366 4.85017C2 4.95204 2 5.06625 2 5.29468V10.7061C2 10.9345 2 11.0487 2.03366 11.1506C2.06343 11.2407 2.11211 11.3234 2.17642 11.3932C2.24912 11.4721 2.34897 11.5276 2.54865 11.6385L7.48198 14.3793C7.67105 14.4843 7.76559 14.5368 7.8657 14.5574C7.95431 14.5756 8.0457 14.5756 8.1343 14.5574C8.23442 14.5368 8.32895 14.4843 8.51802 14.3793L13.4514 11.6385C13.651 11.5276 13.7509 11.4721 13.8236 11.3932C13.8879 11.3234 13.9366 11.2407 13.9663 11.1506C14 11.0487 14 10.9345 14 10.7061Z" stroke={isSelected ? '#155EEF' : '#667085'} strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)
......@@ -51,22 +51,22 @@ const Header: FC<IHeaderProps> = ({ appItems, curApp, userProfile, onLogout, lan
<div className={classNames(
'sticky top-0 left-0 right-0 z-20 flex bg-gray-100 grow-0 shrink-0 basis-auto h-14',
s.header,
isBordered ? 'border-b border-gray-200' : ''
isBordered ? 'border-b border-gray-200' : '',
)}>
<div className={classNames(
s[`header-${langeniusVersionInfo.current_env}`],
'flex flex-1 items-center justify-between px-4'
'flex flex-1 items-center justify-between px-4',
)}>
<div className='flex items-center'>
<Link href="/apps" className='flex items-center mr-3'>
<div className={s['logo']} />
<div className={s.logo} />
</Link>
{/* Add it when has many stars */}
<div className='
flex items-center h-[26px] px-2 bg-white
border border-solid border-[#E5E7EB] rounded-l-[6px] rounded-r-[6px]
'>
<div className={s['alpha']} />
<div className={s.alpha} />
<div className='ml-1 text-xs font-semibold text-gray-700'>{t('common.menus.status')}</div>
</div>
</div>
......@@ -74,7 +74,7 @@ const Header: FC<IHeaderProps> = ({ appItems, curApp, userProfile, onLogout, lan
<Link href="/explore/apps" className={classNames(
navClassName, 'group',
isExplore && 'bg-white shadow-[0_2px_5px_-1px_rgba(0,0,0,0.05),0_2px_4px_-2px_rgba(0,0,0,0.05)]',
isExplore ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'
isExplore ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-700',
)}>
<Squares2X2Icon className='mr-1 w-[18px] h-[18px]' />
{t('common.menus.explore')}
......@@ -84,13 +84,13 @@ const Header: FC<IHeaderProps> = ({ appItems, curApp, userProfile, onLogout, lan
text={t('common.menus.apps')}
activeSegment={['apps', 'app']}
link='/apps'
curNav={curApp && { id: curApp.id, name: curApp.name ,icon: curApp.icon, icon_background: curApp.icon_background}}
curNav={curApp && { id: curApp.id, name: curApp.name, icon: curApp.icon, icon_background: curApp.icon_background }}
navs={appItems.map(item => ({
id: item.id,
name: item.name,
link: `/app/${item.id}/overview`,
icon: item.icon,
icon_background: item.icon_background
icon_background: item.icon_background,
}))}
createText={t('common.menus.newApp')}
onCreate={() => setShowNewAppDialog(true)}
......@@ -98,7 +98,7 @@ const Header: FC<IHeaderProps> = ({ appItems, curApp, userProfile, onLogout, lan
<Link href="/plugins-coming-soon" className={classNames(
navClassName, 'group',
isPluginsComingSoon && 'bg-white shadow-[0_2px_5px_-1px_rgba(0,0,0,0.05),0_2px_4px_-2px_rgba(0,0,0,0.05)]',
isPluginsComingSoon ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'
isPluginsComingSoon ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-700',
)}>
<PuzzlePieceIcon className='mr-1 w-[18px] h-[18px]' />
{t('common.menus.plugins')}
......@@ -114,7 +114,7 @@ const Header: FC<IHeaderProps> = ({ appItems, curApp, userProfile, onLogout, lan
name: dataset.name,
link: `/datasets/${dataset.id}/documents`,
icon: dataset.icon,
icon_background: dataset.icon_background
icon_background: dataset.icon_background,
}))}
createText={t('common.menus.newDataset')}
onCreate={() => router.push('/datasets/create')}
......
web/app/components/share/chat/sidebar/app-info/index.tsx
View file @ a5a61197
'use client'
import React, { FC } from 'react'
import cn from 'classnames'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { appDefaultIconBackground } from '@/config/index'
import AppIcon from '@/app/components/base/app-icon'
export interface IAppInfoProps {
export type IAppInfoProps = {
className?: string
icon: string
icon_background?: string
......@@ -15,7 +16,7 @@ const AppInfo: FC<IAppInfoProps> = ({
className,
icon,
icon_background,
name
name,
}) => {
return (
<div className={cn(className, 'flex items-center space-x-3')}>
......
web/app/components/share/chat/sidebar/index.tsx
View file @ a5a61197
import React, { useEffect, useRef } from 'react'
import React, { useRef } from 'react'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import {
ChatBubbleOvalLeftEllipsisIcon,
PencilSquareIcon
PencilSquareIcon,
} from '@heroicons/react/24/outline'
import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon, } from '@heroicons/react/24/solid'
import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon } from '@heroicons/react/24/solid'
import { useInfiniteScroll } from 'ahooks'
import Button from '../../../base/button'
import AppInfo from '@/app/components/share/chat/sidebar/app-info'
// import Card from './card'
import type { ConversationItem, SiteInfo } from '@/models/share'
import { useInfiniteScroll } from 'ahooks'
import { fetchConversations } from '@/service/share'
function classNames(...classes: any[]) {
......@@ -25,7 +25,7 @@ export type ISidebarProps = {
isInstalledApp: boolean
installedAppId?: string
siteInfo: SiteInfo
onMoreLoaded: (res: {data: ConversationItem[], has_more: boolean}) => void
onMoreLoaded: (res: { data: ConversationItem[]; has_more: boolean }) => void
isNoMore: boolean
}
......@@ -45,19 +45,19 @@ const Sidebar: FC<ISidebarProps> = ({
useInfiniteScroll(
async () => {
if(!isNoMore) {
if (!isNoMore) {
const lastId = list[list.length - 1].id
const { data: conversations, has_more }: any = await fetchConversations(isInstalledApp, installedAppId, lastId)
onMoreLoaded({ data: conversations, has_more })
}
return {list: []}
return { list: [] }
},
{
target: listRef,
isNoMore: () => {
return isNoMore
},
reloadDeps: [isNoMore]
reloadDeps: [isNoMore],
},
)
......@@ -66,7 +66,7 @@ const Sidebar: FC<ISidebarProps> = ({
className={
classNames(
isInstalledApp ? 'tablet:h-[calc(100vh_-_74px)]' : 'tablet:h-[calc(100vh_-_3rem)]',
"shrink-0 flex flex-col bg-white pc:w-[244px] tablet:w-[192px] mobile:w-[240px] border-r border-gray-200 mobile:h-screen"
'shrink-0 flex flex-col bg-white pc:w-[244px] tablet:w-[192px] mobile:w-[240px] border-r border-gray-200 mobile:h-screen',
)
}
>
......
web/app/components/share/text-generation/config-scence/index.tsx
View file @ a5a61197
......@@ -38,25 +38,27 @@ const ConfigSence: FC<IConfigSenceProps> = ({
<div className='w-full mt-4' key={item.key}>
<label className='text-gray-900 text-sm font-medium'>{item.name}</label>
<div className='mt-2'>
{item.type === 'select' ? (
<Select
className='w-full'
defaultValue={inputs[item.key]}
onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
items={(item.options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
) : (
<input
type="text"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
value={inputs[item.key]}
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
{item.type === 'select'
? (
<Select
className='w-full'
defaultValue={inputs[item.key]}
onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
items={(item.options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
)
: (
<input
type="text"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
value={inputs[item.key]}
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
</div>
</div>
))}
......
web/config/index.ts
View file @ a5a61197
const isDevelopment = process.env.NODE_ENV === 'development';
/* eslint-disable import/no-mutable-exports */
const isDevelopment = process.env.NODE_ENV === 'development'
export let apiPrefix = '';
let publicApiPrefix = '';
export let apiPrefix = ''
export let publicApiPrefix = ''
// NEXT_PUBLIC_API_PREFIX=/console/api NEXT_PUBLIC_PUBLIC_API_PREFIX=/api npm run start
if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX;
publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX;
} else if (
globalThis.document?.body?.getAttribute('data-api-prefix') &&
globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
}
else if (
globalThis.document?.body?.getAttribute('data-api-prefix')
&& globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
) {
// Not bulild can not get env from process.env.NEXT_PUBLIC_ in browser https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
apiPrefix = globalThis.document.body.getAttribute('data-api-prefix') as string
publicApiPrefix = globalThis.document.body.getAttribute('data-pubic-api-prefix') as string
} else {
}
else {
if (isDevelopment) {
apiPrefix = 'https://cloud.dify.dev/console/api';
publicApiPrefix = 'https://dev.udify.app/api';
} else {
apiPrefix = 'https://cloud.dify.dev/console/api'
publicApiPrefix = 'https://dev.udify.app/api'
}
else {
// const domainParts = globalThis.location?.host?.split('.');
// in production env, the host is dify.app . In other env, the host is [dev].dify.app
// const env = domainParts.length === 2 ? 'ai' : domainParts?.[0];
apiPrefix = '/console/api';
publicApiPrefix = `/api`; // avoid browser private mode api cross origin
apiPrefix = '/console/api'
publicApiPrefix = '/api' // avoid browser private mode api cross origin
}
}
export const API_PREFIX: string = apiPrefix;
export const PUBLIC_API_PREFIX: string = publicApiPrefix;
export const API_PREFIX: string = apiPrefix
export const PUBLIC_API_PREFIX: string = publicApiPrefix
const EDITION = process.env.NEXT_PUBLIC_EDITION || globalThis.document?.body?.getAttribute('data-public-edition')
export const IS_CE_EDITION = EDITION === 'SELF_HOSTED'
......@@ -75,15 +78,15 @@ export const LOCALE_COOKIE_NAME = 'locale'
export const DEFAULT_VALUE_MAX_LEN = 48
export const zhRegex = /^[\u4e00-\u9fa5]$/m
export const zhRegex = /^[\u4E00-\u9FA5]$/m
export const emojiRegex = /^[\uD800-\uDBFF][\uDC00-\uDFFF]$/m
export const emailRegex = /^[\w\.-]+@([\w-]+\.)+[\w-]{2,}$/m
const MAX_ZN_VAR_NAME_LENGHT = 8
const MAX_EN_VAR_VALUE_LENGHT = 16
export const getMaxVarNameLength = (value: string) => {
if (zhRegex.test(value)) {
if (zhRegex.test(value))
return MAX_ZN_VAR_NAME_LENGHT
}
return MAX_EN_VAR_VALUE_LENGHT
}
......@@ -94,12 +97,9 @@ export const VAR_ITEM_TEMPLATE = {
name: '',
type: 'string',
max_length: DEFAULT_VALUE_MAX_LEN,
required: true
required: true,
}
export const appDefaultIconBackground = '#D5F5F6'
export const NEED_REFRESH_APP_LIST_KEY = 'needRefreshAppList'
web/context/dataset-detail.ts
View file @ a5a61197
import { createContext } from 'use-context-selector'
import type { DataSet } from '@/models/datasets'
const DatasetDetailContext = createContext<{ indexingTechnique?: string; }>({})
const DatasetDetailContext = createContext<{ indexingTechnique?: string; dataset?: DataSet }>({})
export default DatasetDetailContext
web/context/explore-context.ts
View file @ a5a61197
import { createContext } from 'use-context-selector'
import { InstalledApp } from '@/models/explore'
import type { InstalledApp } from '@/models/explore'
type IExplore = {
controlUpdateInstalledApps: number
......
web/i18n/lang/app.en.ts
View file @ a5a61197
......@@ -39,7 +39,7 @@ const translation = {
emoji: {
ok: 'OK',
cancel: 'Cancel',
}
},
}
export default translation
web/i18n/lang/app.zh.ts
View file @ a5a61197
......@@ -38,7 +38,7 @@ const translation = {
emoji: {
ok: '确认',
cancel: '取消',
}
},
}
export default translation
web/i18n/lang/dataset-creation.en.ts
View file @ a5a61197
......@@ -76,6 +76,8 @@ const translation = {
fileName: 'Preprocess document',
lastStep: 'Last step',
nextStep: 'Save & Process',
save: 'Save & Process',
cancel: 'Cancel',
sideTipTitle: 'Why segment and preprocess?',
sideTipP1: 'When processing text data, segmentation and cleaning are two important preprocessing steps.',
sideTipP2: 'Segmentation splits long text into paragraphs so models can understand better. This improves the quality and relevance of model results.',
......
web/i18n/lang/dataset-creation.zh.ts
View file @ a5a61197
......@@ -76,6 +76,8 @@ const translation = {
fileName: '预处理文档',
lastStep: '上一步',
nextStep: '保存并处理',
save: '保存并处理',
cancel: '取消',
sideTipTitle: '为什么要分段和预处理？',
sideTipP1: '在处理文本数据时，分段和清洗是两个重要的预处理步骤。',
sideTipP2: '分段的目的是将长文本拆分成较小的段落，以便模型更有效地处理和理解。这有助于提高模型生成的结果的质量和相关性。',
......
web/i18n/lang/explore.en.ts
View file @ a5a61197
......@@ -11,7 +11,7 @@ const translation = {
delete: {
title: 'Delete app',
content: 'Are you sure you want to delete this app?',
}
},
},
apps: {
title: 'Explore Apps by Dify',
......@@ -28,12 +28,12 @@ const translation = {
nameRequired: 'App name is required',
},
category: {
'Assistant': 'Assistant',
'Writing': 'Writing',
'Translate': 'Translate',
'Programming': 'Programming',
'HR': 'HR',
}
Assistant: 'Assistant',
Writing: 'Writing',
Translate: 'Translate',
Programming: 'Programming',
HR: 'HR',
},
}
export default translation
web/i18n/lang/explore.zh.ts
View file @ a5a61197
......@@ -11,7 +11,7 @@ const translation = {
delete: {
title: '删除程序',
content: '您确定要删除此程序吗？',
}
},
},
apps: {
title: '探索 Dify 的应用',
......@@ -28,12 +28,12 @@ const translation = {
nameRequired: '应用程序名称不能为空',
},
category: {
'Assistant': '助手',
'Writing': '写作',
'Translate': '翻译',
'Programming': '编程',
'HR': '人力资源',
}
Assistant: '助手',
Writing: '写作',
Translate: '翻译',
Programming: '编程',
HR: '人力资源',
},
}
export default translation
web/models/common.ts
View file @ a5a61197
......@@ -56,7 +56,7 @@ export type Member = Pick<UserProfileResponse, 'id' | 'name' | 'email' | 'last_l
export enum ProviderName {
OPENAI = 'openai',
AZURE_OPENAI = 'azure_openai'
AZURE_OPENAI = 'azure_openai',
}
export type ProviderAzureToken = {
openai_api_base?: string
......@@ -91,7 +91,7 @@ export type AccountIntegrate = {
link: string
}
export interface IWorkspace {
export type IWorkspace = {
id: string
name: string
plan: string
......
web/models/explore.ts
View file @ a5a61197
import { AppMode } from "./app";
import type { AppMode } from './app'
export type AppBasicInfo = {
id: string;
name: string;
mode: AppMode;
icon: string;
icon_background: string;
id: string
name: string
mode: AppMode
icon: string
icon_background: string
}
export type App = {
app: AppBasicInfo;
app_id: string;
description: string;
copyright: string;
privacy_policy: string;
category: string;
position: number;
is_listed: boolean;
install_count: number;
installed: boolean;
editable: boolean;
app: AppBasicInfo
app_id: string
description: string
copyright: string
privacy_policy: string
category: string
position: number
is_listed: boolean
install_count: number
installed: boolean
editable: boolean
}
export type InstalledApp = {
app: AppBasicInfo;
id: string;
app: AppBasicInfo
id: string
uninstallable: boolean
is_pinned: boolean
}
\ No newline at end of file
}
web/service/explore.ts
View file @ a5a61197
import { get, post, del, patch } from './base'
import { del, get, patch, post } from './base'
export const fetchAppList = () => {
return get('/explore/apps')
}
export const fetchAppDetail = (id: string) : Promise<any> => {
export const fetchAppDetail = (id: string): Promise<any> => {
return get(`/explore/apps/${id}`)
}
......@@ -15,8 +15,8 @@ export const fetchInstalledAppList = () => {
export const installApp = (id: string) => {
return post('/installed-apps', {
body: {
app_id: id
}
app_id: id,
},
})
}
......@@ -27,7 +27,7 @@ export const uninstallApp = (id: string) => {
export const updatePinStatus = (id: string, isPinned: boolean) => {
return patch(`/installed-apps/${id}`, {
body: {
is_pinned: isPinned
}
is_pinned: isPinned,
},
})
}
web/service/share.ts
View file @ a5a61197
import type { IOnCompleted, IOnData, IOnError } from './base'
import {
get as consoleGet, post as consolePost, del as consoleDel,
getPublic as get, postPublic as post, ssePost, delPublic as del
import {
del as consoleDel, get as consoleGet, post as consolePost,
delPublic as del, getPublic as get, postPublic as post, ssePost,
} from './base'
import type { Feedbacktype } from '@/app/components/app/chat'
......@@ -23,7 +23,7 @@ function getUrl(url: string, isInstalledApp: boolean, installedAppId: string) {
export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onError, getAbortController }: {
onData: IOnData
onCompleted: IOnCompleted
onError: IOnError,
onError: IOnError
getAbortController?: (abortController: AbortController) => void
}, isInstalledApp: boolean, installedAppId = '') => {
return ssePost(getUrl('chat-messages', isInstalledApp, installedAppId), {
......@@ -51,11 +51,11 @@ export const fetchAppInfo = async () => {
return get('/site')
}
export const fetchConversations = async (isInstalledApp: boolean, installedAppId='', last_id?: string) => {
return getAction('get', isInstalledApp)(getUrl('conversations', isInstalledApp, installedAppId), { params: {...{ limit: 20 }, ...(last_id ? { last_id } : {}) } })
export const fetchConversations = async (isInstalledApp: boolean, installedAppId = '', last_id?: string) => {
return getAction('get', isInstalledApp)(getUrl('conversations', isInstalledApp, installedAppId), { params: { ...{ limit: 20 }, ...(last_id ? { last_id } : {}) } })
}
export const fetchChatList = async (conversationId: string, isInstalledApp: boolean, installedAppId='') => {
export const fetchChatList = async (conversationId: string, isInstalledApp: boolean, installedAppId = '') => {
return getAction('get', isInstalledApp)(getUrl('messages', isInstalledApp, installedAppId), { params: { conversation_id: conversationId, limit: 20, last_id: '' } })
}
......@@ -77,7 +77,7 @@ export const fetchMoreLikeThis = async (messageId: string, isInstalledApp: boole
return (getAction('get', isInstalledApp))(getUrl(`/messages/${messageId}/more-like-this`, isInstalledApp, installedAppId), {
params: {
response_mode: 'blocking',
}
},
})
}
......@@ -86,7 +86,7 @@ export const saveMessage = (messageId: string, isInstalledApp: boolean, installe
}
export const fetchSavedMessage = async (isInstalledApp: boolean, installedAppId = '') => {
return (getAction('get', isInstalledApp))(getUrl(`/saved-messages`, isInstalledApp, installedAppId))
return (getAction('get', isInstalledApp))(getUrl('/saved-messages', isInstalledApp, installedAppId))
}
export const removeMessage = (messageId: string, isInstalledApp: boolean, installedAppId = '') => {
......
web/types/app.ts
View file @ a5a61197
......@@ -38,16 +38,16 @@ export type PromptVariable = {
}
export type TextTypeFormItem = {
label: string,
variable: string,
label: string
variable: string
required: boolean
max_length: number
}
export type SelectTypeFormItem = {
label: string,
variable: string,
required: boolean,
label: string
variable: string
required: boolean
options: string[]
}
/**
......@@ -59,7 +59,6 @@ export type UserInputFormItem = {
'select': SelectTypeFormItem
}
export type ToolItem = {
dataset: {
enabled: boolean
......@@ -195,7 +194,7 @@ export type App = {
icon: string
/** Icon Background */
icon_background: string
/** Mode */
mode: AppMode
/** Enable web app */
......
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