Feat: dark mode for logs and annotations (#11575)
KVOJJJin
1 year ago
committed by
Joel
parent
880094cc7b
commit
076bd1cf8d
@ -1,38 +0,0 @@
|
|||||||
.actionIconWrapper {
|
|
||||||
@apply h-8 w-8 p-2 rounded-md hover:bg-gray-100 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commonIcon {
|
|
||||||
@apply w-4 h-4 inline-block align-middle;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionIcon {
|
|
||||||
@apply bg-gray-500;
|
|
||||||
mask-image: url(~@/assets/action.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionItemIcon {
|
|
||||||
@apply w-4 h-4 text-gray-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionItem {
|
|
||||||
@apply h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-gray-100 rounded-lg cursor-pointer disabled:opacity-50;
|
|
||||||
width: calc(100% - 0.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deleteActionItem {
|
|
||||||
@apply hover:bg-red-50 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionName {
|
|
||||||
@apply grow text-gray-700 text-sm text-left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
|
||||||
left: 4px;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.table td {
|
|
||||||
padding: 7px 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import {
|
||||||
|
RiInformation2Line,
|
||||||
|
} from '@remixicon/react'
|
||||||
|
import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
|
||||||
|
import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
|
||||||
|
import {
|
||||||
|
PortalToFollowElem,
|
||||||
|
PortalToFollowElemContent,
|
||||||
|
PortalToFollowElemTrigger,
|
||||||
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
|
||||||
|
const PARAM_MAP = {
|
||||||
|
temperature: 'Temperature',
|
||||||
|
top_p: 'Top P',
|
||||||
|
presence_penalty: 'Presence Penalty',
|
||||||
|
max_tokens: 'Max Token',
|
||||||
|
stop: 'Stop',
|
||||||
|
frequency_penalty: 'Frequency Penalty',
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
model: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModelInfo: FC<Props> = ({
|
||||||
|
model,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const modelName = model.name
|
||||||
|
const provideName = model.provider as any
|
||||||
|
const {
|
||||||
|
currentModel,
|
||||||
|
currentProvider,
|
||||||
|
} = useTextGenerationCurrentProviderAndModelAndModelList(
|
||||||
|
{ provider: provideName, model: modelName },
|
||||||
|
)
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
|
||||||
|
const getParamValue = (param: string) => {
|
||||||
|
const value = model.completion_params?.[param] || '-'
|
||||||
|
if (param === 'stop') {
|
||||||
|
if (Array.isArray(value))
|
||||||
|
return value.join(',')
|
||||||
|
else
|
||||||
|
return '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('flex items-center rounded-lg')}>
|
||||||
|
<div className='shrink-0 flex items-center gap-1 mr-px h-8 pl-1.5 pr-2 rounded-l-lg bg-components-input-bg-normal'>
|
||||||
|
<ModelIcon
|
||||||
|
className='!w-5 !h-5'
|
||||||
|
provider={currentProvider}
|
||||||
|
modelName={currentModel?.model}
|
||||||
|
/>
|
||||||
|
<ModelName
|
||||||
|
modelItem={currentModel!}
|
||||||
|
showMode
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
placement='bottom-end'
|
||||||
|
offset={4}
|
||||||
|
>
|
||||||
|
<div className='relative'>
|
||||||
|
<PortalToFollowElemTrigger
|
||||||
|
onClick={() => setOpen(v => !v)}
|
||||||
|
className='block'
|
||||||
|
>
|
||||||
|
<div className={cn(
|
||||||
|
'p-2 rounded-r-lg bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer',
|
||||||
|
open && 'bg-components-button-tertiary-bg-hover',
|
||||||
|
)}>
|
||||||
|
<RiInformation2Line className='h-4 w-4 text-text-tertiary' />
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[1002]'>
|
||||||
|
<div className='relative w-[280px] pt-3 px-4 pb-2 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl overflow-hidden'>
|
||||||
|
<div className='mb-1 h-6 text-text-secondary system-sm-semibold-uppercase'>{t('appLog.detail.modelParams')}</div>
|
||||||
|
<div className='py-1'>
|
||||||
|
{['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
|
||||||
|
return <div className='flex justify-between py-1.5' key={index}>
|
||||||
|
<span className='text-text-tertiary system-xs-medium-uppercase'>{PARAM_MAP[param as keyof typeof PARAM_MAP]}</span>
|
||||||
|
<span className='text-text-secondary system-xs-medium-uppercase'>{getParamValue(param)}</span>
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(ModelInfo)
|
||||||
@ -1,3 +0,0 @@
|
|||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 212 B |
@ -1,9 +0,0 @@
|
|||||||
.popupBtn {
|
|
||||||
@apply inline-flex items-center bg-white px-3 py-2 rounded-lg text-base border border-gray-200 font-medium hover:bg-gray-100 focus:outline-none
|
|
||||||
}
|
|
||||||
.popupPanel {
|
|
||||||
@apply absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl
|
|
||||||
}
|
|
||||||
.panelContainer {
|
|
||||||
@apply overflow-hidden bg-white w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue