GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-29 18:00:14 +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 (
<Dialog>
<DialogTrigger asChild>
<ChatAction text={t("file.upload")}>
<ChatAction text={t("file.upload")} className={value.length > 0 ? "active" : ""}>
<Plus className={`h-4 w-4`} />
</ChatAction>
</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 current: number = useSelector(selectCurrent);
const [scrollable, setScrollable] = React.useState(true);
const [position, setPosition] = React.useState(0);
useEffect(
function () {
@ -38,8 +39,12 @@ function ChatInterface({ setTarget, setWorking }: ChatInterfaceProps) {
if (!ref.current) return;
const el = ref.current as HTMLDivElement;
const event = () =>
setScrollable(el.scrollTop + el.clientHeight >= el.scrollHeight);
const event = () => {
const offset = el.scrollTop - position;
setPosition(el.scrollTop);
if (offset < 0) setScrollable(false);
else setScrollable(el.scrollTop + el.clientHeight + 20 >= el.scrollHeight);
};
return addEventListeners(
el,
["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 { ChatAction } from "@/components/home/assemblies/ChatAction.tsx";
import { useTranslation } from "react-i18next";
import {Message} from "@/api/types.ts";
import {useSelector} from "react-redux";
import {selectMessages} from "@/store/chat.ts";
type ScrollActionProps = {
visible: boolean;
@ -13,9 +16,14 @@ type ScrollActionProps = {
function ScrollAction({ visible, target, setVisibility }: ScrollActionProps) {
const { t } = useTranslation();
const messages: Message[] = useSelector(selectMessages);
useEffect(() => {
if (!target) return;
if (messages.length === 0) return setVisibility(false);
}, [messages]);
useEffect(() => {
if (!target) return setVisibility(false);
addEventListeners(target, ["scroll", "resize"], listenScrollingAction);
}, [target]);