GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-30 10:20:21 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimize: update scrolling and upload action

Browse Source
This commit is contained in:
Zhang Minghan 2023-11-27 12:49:25 +08:00
parent e3b656469f
commit d6a02dc278
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/FileProvider.tsx
View File

@ -65,7 +65,7 @@ function FileProvider({ value, onChange }: FileProviderProps) {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<ChatAction text={t("file.upload")}> <ChatAction text={t("file.upload")} className={value.length > 0 ? "active" : ""}>
<Plus className={`h-4 w-4`} /> <Plus className={`h-4 w-4`} />
</ChatAction> </ChatAction>
</DialogTrigger> </DialogTrigger>

9
app/src/components/home/ChatInterface.tsx
View File

@ -17,6 +17,7 @@ function ChatInterface({ setTarget, setWorking }: ChatInterfaceProps) {
const messages: Message[] = useSelector(selectMessages); const messages: Message[] = useSelector(selectMessages);
const current: number = useSelector(selectCurrent); const current: number = useSelector(selectCurrent);
const [scrollable, setScrollable] = React.useState(true); const [scrollable, setScrollable] = React.useState(true);
const [position, setPosition] = React.useState(0);
useEffect( useEffect(
function () { function () {
@ -38,8 +39,12 @@ function ChatInterface({ setTarget, setWorking }: ChatInterfaceProps) {
if (!ref.current) return; if (!ref.current) return;
const el = ref.current as HTMLDivElement; const el = ref.current as HTMLDivElement;
const event = () => const event = () => {
setScrollable(el.scrollTop + el.clientHeight >= el.scrollHeight); const offset = el.scrollTop - position;
setPosition(el.scrollTop);
if (offset < 0) setScrollable(false);
else setScrollable(el.scrollTop + el.clientHeight + 20 >= el.scrollHeight);
};
return addEventListeners( return addEventListeners(
el, el,
["scroll", "scrollend", "resize", "touchend"], ["scroll", "scrollend", "resize", "touchend"],

10
app/src/components/home/assemblies/ScrollAction.tsx
View File

@ -4,6 +4,9 @@ import { chatEvent } from "@/events/chat.ts";
import { addEventListeners, scrollDown } from "@/utils/dom.ts"; import { addEventListeners, scrollDown } from "@/utils/dom.ts";
import { ChatAction } from "@/components/home/assemblies/ChatAction.tsx"; import { ChatAction } from "@/components/home/assemblies/ChatAction.tsx";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import {Message} from "@/api/types.ts";
import {useSelector} from "react-redux";
import {selectMessages} from "@/store/chat.ts";
type ScrollActionProps = { type ScrollActionProps = {
visible: boolean; visible: boolean;
@ -13,9 +16,14 @@ type ScrollActionProps = {
function ScrollAction({ visible, target, setVisibility }: ScrollActionProps) { function ScrollAction({ visible, target, setVisibility }: ScrollActionProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const messages: Message[] = useSelector(selectMessages);
useEffect(() => { useEffect(() => {
if (!target) return; if (messages.length === 0) return setVisibility(false);
}, [messages]);
useEffect(() => {
if (!target) return setVisibility(false);
addEventListeners(target, ["scroll", "resize"], listenScrollingAction); addEventListeners(target, ["scroll", "resize"], listenScrollingAction);
}, [target]); }, [target]);