-
-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #129 from lobehub/chore/remove-panel
Chore/remove panel
- Loading branch information
Showing
80 changed files
with
1,087 additions
and
1,096 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| 'use client'; | ||
|
|
||
| import { Skeleton } from 'antd'; | ||
| import { createStyles } from 'antd-style'; | ||
| import { memo } from 'react'; | ||
| import { Flexbox } from 'react-layout-kit'; | ||
|
|
||
| const useStyles = createStyles(({ css, prefixCls }) => ({ | ||
| message: css` | ||
| display: flex; | ||
| gap: 12px; | ||
| .${prefixCls}-skeleton-header { | ||
| padding: 0; | ||
| } | ||
| `, | ||
| user: css` | ||
| flex-direction: row-reverse; | ||
| .${prefixCls}-skeleton-paragraph { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-end; | ||
| } | ||
| `, | ||
| })); | ||
| interface SkeletonListProps { | ||
| mobile?: boolean; | ||
| } | ||
| const SkeletonList = memo<SkeletonListProps>(({ mobile }) => { | ||
| const { cx, styles } = useStyles(); | ||
|
|
||
| return ( | ||
| <Flexbox gap={24} padding={mobile ? 8 : 12} style={{ marginTop: 24 + (mobile ? 0 : 64) }}> | ||
| <Skeleton | ||
| active | ||
| avatar={{ size: mobile ? 32 : 40 }} | ||
| className={cx(styles.message, styles.user)} | ||
| paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }} | ||
| title={false} | ||
| /> | ||
| <Skeleton | ||
| active | ||
| avatar={{ size: mobile ? 32 : 40 }} | ||
| className={styles.message} | ||
| paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }} | ||
| title={false} | ||
| /> | ||
| </Flexbox> | ||
| ); | ||
| }); | ||
| export default SkeletonList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Space } from 'antd'; | ||
| import classNames from 'classnames'; | ||
| import isEqual from 'fast-deep-equal'; | ||
| import React, { memo, useEffect, useRef, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Flexbox } from 'react-layout-kit'; | ||
| import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'; | ||
|
|
||
| import Header from '@/components/Header'; | ||
| import Item from '@/features/ChatItem'; | ||
| import { sessionSelectors, useSessionStore } from '@/store/session'; | ||
|
|
||
| import History from './Actions/History'; | ||
| import TokenMini from './Actions/TokenMini'; | ||
| import AutoScroll from './AutoScroll'; | ||
| import { useStyles } from './style'; | ||
|
|
||
| const itemContent = (index: number, id: string) => { | ||
| return index === 0 ? ( | ||
| <div style={{ height: 24 }} /> | ||
| ) : ( | ||
| <Item id={id} index={index - 1} showTitle /> | ||
| ); | ||
| }; | ||
|
|
||
| interface VirtualizedListProps { | ||
| className?: string; | ||
| mobile?: boolean; | ||
| style?: React.CSSProperties; | ||
| } | ||
| const VirtualizedList = memo<VirtualizedListProps>(({ mobile, className, style }) => { | ||
| const virtuosoRef = useRef<VirtuosoHandle>(null); | ||
| const [atBottom, setAtBottom] = useState(true); | ||
| const { styles } = useStyles(); | ||
| const { t } = useTranslation('chat'); | ||
|
|
||
| const data = useSessionStore( | ||
| (s) => ['empty', ...sessionSelectors.currentChatIDsWithGreetingMessage(s)], | ||
| isEqual, | ||
| ); | ||
| const [id, chatLoading] = useSessionStore((s) => [s.activeId, !!s.chatLoadingId]); | ||
|
|
||
| useEffect(() => { | ||
| if (virtuosoRef.current) { | ||
| virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' }); | ||
| } | ||
| }, [id]); | ||
|
|
||
| // overscan should be 1.5 times the height of the window | ||
| const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0; | ||
|
|
||
| // @ts-ignore | ||
| return chatLoading && data.length === 2 ? null : ( | ||
| <Flexbox style={style} className={classNames(className, styles.list)}> | ||
| <Header | ||
| title={t('history.title')} | ||
| className={styles.header} | ||
| extra={ | ||
| <Space> | ||
| <TokenMini /> | ||
| <History key={'history'} /> | ||
| </Space> | ||
| } | ||
| /> | ||
| <Virtuoso | ||
| atBottomStateChange={setAtBottom} | ||
| atBottomThreshold={60 * (mobile ? 2 : 1)} | ||
| computeItemKey={(_, item) => item} | ||
| data={data} | ||
| followOutput={'auto'} | ||
| initialTopMostItemIndex={data?.length - 1} | ||
| itemContent={itemContent} | ||
| overscan={overscan} | ||
| ref={virtuosoRef} | ||
| /> | ||
| <AutoScroll | ||
| atBottom={atBottom} | ||
| onScrollToBottom={(type) => { | ||
| const virtuoso = virtuosoRef.current; | ||
| switch (type) { | ||
| case 'auto': { | ||
| virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' }); | ||
| break; | ||
| } | ||
| case 'click': { | ||
| virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' }); | ||
| break; | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| </Flexbox> | ||
| ); | ||
| }); | ||
|
|
||
| export default VirtualizedList; |
Oops, something went wrong.