Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: switch to use-stick-to-bottom #803

Merged
merged 1 commit into from
Oct 11, 2024
Merged

feat: switch to use-stick-to-bottom #803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/interfaces/assistants_web/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json package-lock.json ./
COPY patches ./patches
RUN npm ci

COPY src ./src
Expand All @@ -29,4 +28,4 @@ CMD npm run dev
# Production specifc tareget
FROM base AS prod
RUN npm run build
CMD npm run start
CMD npm run start
2 changes: 1 addition & 1 deletion src/interfaces/assistants_web/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
615 changes: 55 additions & 560 deletions src/interfaces/assistants_web/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 2 additions & 5 deletions src/interfaces/assistants_web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
"start:single-docker-proxy": "next start --port 8090",
"generate:client": "openapi-ts",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"postinstall": "patch-package"
"build-storybook": "storybook build"
},
"dependencies": {
"@floating-ui/react": "^0.26.9",
Expand Down Expand Up @@ -70,7 +69,7 @@
"react-lottie-player": "^1.4.3",
"react-markdown": "^9.0.1",
"react-popper": "^2.3.0",
"react-scroll-to-bottom": "^4.2.0",
"use-stick-to-bottom": "^1.0.39",
"react-swipeable": "^7.0.1",
"react-syntax-highlighter": "^15.5.0",
"rehype-highlight": "6.0.0",
Expand Down Expand Up @@ -107,7 +106,6 @@
"@types/js-cookie": "^3.0.6",
"@types/lodash": "^4.14.185",
"@types/node": "^18.15.0",
"@types/react-scroll-to-bottom": "^4.2.0",
"@types/react-syntax-highlighter": "^15.5.11",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
Expand All @@ -117,7 +115,6 @@
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-storybook": "^0.8.0",
"jsdom": "^24.1.1",
"patch-package": "^8.0.0",
"postcss-100vh-fix": "^1.0.2",
"prettier": "2.8.7",
"prettier-plugin-tailwindcss": "0.4.1",
Expand Down
295 changes: 0 additions & 295 deletions src/interfaces/assistants_web/patches/react-scroll-to-bottom+4.2.0.patch
View file
Open in desktop

This file was deleted.

41 changes: 18 additions & 23 deletions src/interfaces/assistants_web/src/components/MessagingContainer/MessagingContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Transition } from '@headlessui/react';
import { usePrevious } from '@react-hookz/web';
import React, { ReactNode, memo, useEffect, useMemo } from 'react';
import ScrollToBottom, { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';
import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';

import { MessageRow } from '@/components/MessageRow';
import { Welcome } from '@/components/MessagingContainer';
Expand Down Expand Up @@ -34,24 +34,20 @@ type Props = {
const MessagingContainerContents: React.FC<Props> = (props) => {
const { scrollViewClassName = '', ...rest } = props;
return (
<ScrollToBottom
mode={props.messages.length === 0 ? 'top' : 'bottom'}
initialScrollBehavior="smooth"
className="relative flex h-0 flex-grow flex-col"
scrollViewClassName={cn(
'!h-full',
'flex relative mt-auto overflow-x-hidden',
{
// For vertically centering the content in @/components/Welcome.tsx
'mt-0 md:mt-auto': props.messages.length === 0,
},
scrollViewClassName
)}
followButtonClassName="hidden"
debounce={100}
>
<Content {...rest} />
</ScrollToBottom>
<StickToBottom className="relative flex h-0 flex-grow flex-col">
<StickToBottom.Content
className={cn(
'relative mt-auto flex overflow-x-hidden',
{
// For vertically centering the content in @/components/Welcome.tsx
'mt-0 md:mt-auto': props.messages.length === 0,
},
scrollViewClassName
)}
>
<Content {...rest} />
</StickToBottom.Content>
</StickToBottom>
);
};
export const MessagingContainer = memo(MessagingContainerContents);
Expand All @@ -62,10 +58,9 @@ export const MessagingContainer = memo(MessagingContainerContents);
*/
const Content: React.FC<Props> = (props) => {
const { isStreaming, messages, composer, streamingMessage } = props;
const scrollToBottom = useScrollToBottom();
const { scrollToBottom, isAtBottom } = useStickToBottomContext();

useFixCopyBug();
const [isAtBottom] = useSticky();
const prevIsStreaming = usePrevious(isStreaming);

// Show the `New Message` button if the user has scrolled up
Expand All @@ -86,12 +81,12 @@ const Content: React.FC<Props> = (props) => {
useEffect(() => {
const lastMessage = messages[messages.length - 1];
if (lastMessage?.type === MessageType.USER) {
scrollToBottom({ behavior: 'smooth' });
scrollToBottom();
}
}, [messages.length, scrollToBottom]);

const handleScrollToNewMessage = () => {
scrollToBottom({ behavior: 'smooth' });
scrollToBottom();
};

return (
Expand Down
37 changes: 0 additions & 37 deletions src/interfaces/assistants_web/src/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,3 @@ declare module 'js-resume-parser' {
export function getDataFromPDF(file: File): Promise<{ text: string }>;
export function getDataFromDocx(file: File): Promise<{ text: string }>;
}

// from https://github.com/compulim/react-scroll-to-bottom/issues/81 with additions
declare module 'react-scroll-to-bottom' {
import * as React from 'react';

interface ReactScrollToBottomProps {
checkInterval?: number;
className?: string;
debounce?: number;
followButtonClassName?: string;
mode?: string;
scrollViewClassName?: string;
children: React.ReactNode;
debug?: boolean;
initialScrollBehavior?: 'smooth' | 'auto';
}

interface ScrollOptions {
behavior: ScrollBehavior;
}

interface FunctionContextProps {
scrollTo: (scrollTo: number, options: ScrollOptions) => void;
scrollToBottom: (options: ScrollOptions) => void;
scrollToEnd: (options: ScrollOptions) => void;
scrollToStart: (options: ScrollOptions) => void;
scrollToTop: (options: ScrollOptions) => void;
}

export const useScrollToBottom: () => FunctionContextProps.scrollToBottom;
export const useAtTop: () => [boolean];
export const useSticky: () => [boolean];

const FunctionContext: React.Context<FunctionContextProps>;

export default class ScrollToBottom extends React.PureComponent<ReactScrollToBottomProps> {}
}
Loading
Loading