Feat/embedding (#553)
Co-authored-by: Gillian97 <jinling.sunshine@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
28
web/app/components/share/chatbot/sidebar/app-info/index.tsx
Normal file
28
web/app/components/share/chatbot/sidebar/app-info/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client'
|
||||
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 type IAppInfoProps = {
|
||||
className?: string
|
||||
icon: string
|
||||
icon_background?: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const AppInfo: FC<IAppInfoProps> = ({
|
||||
className,
|
||||
icon,
|
||||
icon_background,
|
||||
name,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(className, 'flex items-center space-x-3')}>
|
||||
<AppIcon size="small" icon={icon} background={icon_background || appDefaultIconBackground} />
|
||||
<div className='w-0 grow text-sm font-semibold text-gray-800 overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(AppInfo)
|
||||
3
web/app/components/share/chatbot/sidebar/card.module.css
Normal file
3
web/app/components/share/chatbot/sidebar/card.module.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.card:hover {
|
||||
background: linear-gradient(0deg, rgba(235, 245, 255, 0.4), rgba(235, 245, 255, 0.4)), #FFFFFF;
|
||||
}
|
||||
19
web/app/components/share/chatbot/sidebar/card.tsx
Normal file
19
web/app/components/share/chatbot/sidebar/card.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import s from './card.module.css'
|
||||
|
||||
type PropType = {
|
||||
children: React.ReactNode
|
||||
text?: string
|
||||
}
|
||||
function Card({ children, text }: PropType) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className={`${s.card} box-border w-full flex flex-col items-start px-4 py-3 rounded-lg border-solid border border-gray-200 cursor-pointer hover:border-primary-300`}>
|
||||
<div className='text-gray-400 font-medium text-xs mb-2'>{text ?? t('share.chat.powerBy')}</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Card
|
||||
151
web/app/components/share/chatbot/sidebar/index.tsx
Normal file
151
web/app/components/share/chatbot/sidebar/index.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PencilSquareIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import cn from 'classnames'
|
||||
import Button from '../../../base/button'
|
||||
import List from './list'
|
||||
import AppInfo from '@/app/components/share/chat/sidebar/app-info'
|
||||
// import Card from './card'
|
||||
import type { ConversationItem, SiteInfo } from '@/models/share'
|
||||
import { fetchConversations } from '@/service/share'
|
||||
|
||||
export type ISidebarProps = {
|
||||
copyRight: string
|
||||
currentId: string
|
||||
onCurrentIdChange: (id: string) => void
|
||||
list: ConversationItem[]
|
||||
isClearConversationList: boolean
|
||||
pinnedList: ConversationItem[]
|
||||
isClearPinnedConversationList: boolean
|
||||
isInstalledApp: boolean
|
||||
installedAppId?: string
|
||||
siteInfo: SiteInfo
|
||||
onMoreLoaded: (res: { data: ConversationItem[]; has_more: boolean }) => void
|
||||
onPinnedMoreLoaded: (res: { data: ConversationItem[]; has_more: boolean }) => void
|
||||
isNoMore: boolean
|
||||
isPinnedNoMore: boolean
|
||||
onPin: (id: string) => void
|
||||
onUnpin: (id: string) => void
|
||||
controlUpdateList: number
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
const Sidebar: FC<ISidebarProps> = ({
|
||||
copyRight,
|
||||
currentId,
|
||||
onCurrentIdChange,
|
||||
list,
|
||||
isClearConversationList,
|
||||
pinnedList,
|
||||
isClearPinnedConversationList,
|
||||
isInstalledApp,
|
||||
installedAppId,
|
||||
siteInfo,
|
||||
onMoreLoaded,
|
||||
onPinnedMoreLoaded,
|
||||
isNoMore,
|
||||
isPinnedNoMore,
|
||||
onPin,
|
||||
onUnpin,
|
||||
controlUpdateList,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [hasPinned, setHasPinned] = useState(false)
|
||||
|
||||
const checkHasPinned = async () => {
|
||||
const { data }: any = await fetchConversations(isInstalledApp, installedAppId, undefined, true)
|
||||
setHasPinned(data.length > 0)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkHasPinned()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (controlUpdateList !== 0)
|
||||
checkHasPinned()
|
||||
}, [controlUpdateList])
|
||||
|
||||
const maxListHeight = isInstalledApp ? 'max-h-[30vh]' : 'max-h-[40vh]'
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
cn(
|
||||
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',
|
||||
)
|
||||
}
|
||||
>
|
||||
{isInstalledApp && (
|
||||
<AppInfo
|
||||
className='my-4 px-4'
|
||||
name={siteInfo.title || ''}
|
||||
icon={siteInfo.icon || ''}
|
||||
icon_background={siteInfo.icon_background}
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-shrink-0 p-4 !pb-0">
|
||||
<Button
|
||||
onClick={() => { onCurrentIdChange('-1') }}
|
||||
className="group block w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
|
||||
<PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={'flex-grow flex flex-col h-0 overflow-y-auto overflow-x-hidden'}>
|
||||
{/* pinned list */}
|
||||
{hasPinned && (
|
||||
<div className={cn('mt-4 px-4', list.length === 0 && 'flex flex-col flex-grow')}>
|
||||
<div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.pinnedTitle')}</div>
|
||||
<List
|
||||
className={cn(list.length > 0 ? maxListHeight : 'flex-grow')}
|
||||
currentId={currentId}
|
||||
onCurrentIdChange={onCurrentIdChange}
|
||||
list={pinnedList}
|
||||
isClearConversationList={isClearPinnedConversationList}
|
||||
isInstalledApp={isInstalledApp}
|
||||
installedAppId={installedAppId}
|
||||
onMoreLoaded={onPinnedMoreLoaded}
|
||||
isNoMore={isPinnedNoMore}
|
||||
isPinned={true}
|
||||
onPinChanged={id => onUnpin(id)}
|
||||
controlUpdate={controlUpdateList + 1}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* unpinned list */}
|
||||
<div className={cn('mt-4 px-4', !hasPinned && 'flex flex-col flex-grow')}>
|
||||
{(hasPinned && list.length > 0) && (
|
||||
<div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.unpinnedTitle')}</div>
|
||||
)}
|
||||
<List
|
||||
className={cn(hasPinned ? maxListHeight : 'flex-grow')}
|
||||
currentId={currentId}
|
||||
onCurrentIdChange={onCurrentIdChange}
|
||||
list={list}
|
||||
isClearConversationList={isClearConversationList}
|
||||
isInstalledApp={isInstalledApp}
|
||||
installedAppId={installedAppId}
|
||||
onMoreLoaded={onMoreLoaded}
|
||||
isNoMore={isNoMore}
|
||||
isPinned={false}
|
||||
onPinChanged={id => onPin(id)}
|
||||
controlUpdate={controlUpdateList + 1}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 pr-4 pb-4 pl-4">
|
||||
<div className="text-gray-400 font-normal text-xs">© {copyRight} {(new Date()).getFullYear()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Sidebar)
|
||||
115
web/app/components/share/chatbot/sidebar/list/index.tsx
Normal file
115
web/app/components/share/chatbot/sidebar/list/index.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useRef } from 'react'
|
||||
import {
|
||||
ChatBubbleOvalLeftEllipsisIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { useInfiniteScroll } from 'ahooks'
|
||||
import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon } from '@heroicons/react/24/solid'
|
||||
import cn from 'classnames'
|
||||
import s from './style.module.css'
|
||||
import type { ConversationItem } from '@/models/share'
|
||||
import { fetchConversations } from '@/service/share'
|
||||
import ItemOperation from '@/app/components/explore/item-operation'
|
||||
|
||||
export type IListProps = {
|
||||
className: string
|
||||
currentId: string
|
||||
onCurrentIdChange: (id: string) => void
|
||||
list: ConversationItem[]
|
||||
isClearConversationList: boolean
|
||||
isInstalledApp: boolean
|
||||
installedAppId?: string
|
||||
onMoreLoaded: (res: { data: ConversationItem[]; has_more: boolean }) => void
|
||||
isNoMore: boolean
|
||||
isPinned: boolean
|
||||
onPinChanged: (id: string) => void
|
||||
controlUpdate: number
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
const List: FC<IListProps> = ({
|
||||
className,
|
||||
currentId,
|
||||
onCurrentIdChange,
|
||||
list,
|
||||
isClearConversationList,
|
||||
isInstalledApp,
|
||||
installedAppId,
|
||||
onMoreLoaded,
|
||||
isNoMore,
|
||||
isPinned,
|
||||
onPinChanged,
|
||||
controlUpdate,
|
||||
onDelete,
|
||||
}) => {
|
||||
const listRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useInfiniteScroll(
|
||||
async () => {
|
||||
if (!isNoMore) {
|
||||
const lastId = !isClearConversationList ? list[list.length - 1]?.id : undefined
|
||||
const { data: conversations, has_more }: any = await fetchConversations(isInstalledApp, installedAppId, lastId, isPinned)
|
||||
onMoreLoaded({ data: conversations, has_more })
|
||||
}
|
||||
return { list: [] }
|
||||
},
|
||||
{
|
||||
target: listRef,
|
||||
isNoMore: () => {
|
||||
return isNoMore
|
||||
},
|
||||
reloadDeps: [isNoMore, controlUpdate],
|
||||
},
|
||||
)
|
||||
return (
|
||||
<nav
|
||||
ref={listRef}
|
||||
className={cn(className, 'shrink-0 space-y-1 bg-white pb-[85px] overflow-y-auto')}
|
||||
>
|
||||
{list.map((item) => {
|
||||
const isCurrent = item.id === currentId
|
||||
const ItemIcon
|
||||
= isCurrent ? ChatBubbleOvalLeftEllipsisSolidIcon : ChatBubbleOvalLeftEllipsisIcon
|
||||
return (
|
||||
<div
|
||||
onClick={() => onCurrentIdChange(item.id)}
|
||||
key={item.id}
|
||||
className={cn(s.item,
|
||||
isCurrent
|
||||
? 'bg-primary-50 text-primary-600'
|
||||
: 'text-gray-700 hover:bg-gray-200 hover:text-gray-700',
|
||||
'group flex justify-between items-center rounded-md px-2 py-2 text-sm font-medium cursor-pointer',
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center w-0 grow'>
|
||||
<ItemIcon
|
||||
className={cn(
|
||||
isCurrent
|
||||
? 'text-primary-600'
|
||||
: 'text-gray-400 group-hover:text-gray-500',
|
||||
'mr-3 h-5 w-5 flex-shrink-0',
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{item.name}</span>
|
||||
</div>
|
||||
|
||||
{item.id !== '-1' && (
|
||||
<div className={cn(s.opBtn, 'shrink-0')} onClick={e => e.stopPropagation()}>
|
||||
<ItemOperation
|
||||
isPinned={isPinned}
|
||||
togglePin={() => onPinChanged(item.id)}
|
||||
isShowDelete
|
||||
onDelete={() => onDelete(item.id)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,7 @@
|
||||
.opBtn {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.item:hover .opBtn {
|
||||
visibility: visible;
|
||||
}
|
||||
Reference in New Issue
Block a user