UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Strider Wilson 2025-06-03 10:29:50 -04:00
parent a4d5f9ed76
commit fe5da03df6
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/chat/Messages/Messages.client.tsx
View File

@ -165,31 +165,35 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>(
const setRefs = useCallback(
(element: HTMLDivElement | null) => {
containerRef.current = element;
if (typeof ref === 'function') {
ref(element);
} else if (ref) {
ref.current = element;
}
},
[ref]
[ref],
);
const handleScroll = () => {
if (!containerRef.current) return;
if (!containerRef.current) {
return;
}
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
setShowJumpToBottom(distanceFromBottom > 50);
};
const scrollToBottom = () => {
if (!containerRef.current) return;
if (!containerRef.current) {
return;
}
containerRef.current.scrollTo({
top: containerRef.current.scrollHeight,
behavior: 'smooth'
behavior: 'smooth',
});
};
@ -199,6 +203,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>(
container.addEventListener('scroll', handleScroll);
return () => container.removeEventListener('scroll', handleScroll);
}
return undefined;
}, []);
useEffect(() => {
@ -294,7 +299,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>(
data-testid="message"
key={index}
className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
'bg-bolt-elements-messages-background': isUserMessage || !hasPendingMessage || (hasPendingMessage && !isLast),
'bg-bolt-elements-messages-background':
isUserMessage || !hasPendingMessage || (hasPendingMessage && !isLast),
'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
hasPendingMessage && isLast,
'mt-4': !isFirst,
@ -367,10 +373,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>(
<div className="relative flex-1 min-h-0">
<div
ref={setRefs}
className={classNames(
'absolute inset-0 overflow-y-auto',
'flex flex-col w-full max-w-chat pb-6 mx-auto',
)}
className={classNames('absolute inset-0 overflow-y-auto', 'flex flex-col w-full max-w-chat pb-6 mx-auto')}
>
{messages.length > 0 ? messages.map(renderMessage) : null}
{hasPendingMessage && (
@ -383,4 +386,5 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>(
<JumpToBottom visible={showJumpToBottom} onClick={scrollToBottom} />
</div>
);
});
},
);

8
app/components/chat/Messages/components/JumpToBottom.tsx
View File

@ -7,7 +7,9 @@ interface JumpToBottomProps {
}
export const JumpToBottom: React.FC<JumpToBottomProps> = ({ visible, onClick }) => {
if (!visible) return null;
if (!visible) {
return null;
}
return (
<div className="absolute left-0 right-0 bottom-5 flex justify-center pointer-events-none">
@ -21,7 +23,7 @@ export const JumpToBottom: React.FC<JumpToBottomProps> = ({ visible, onClick })
'hover:border-white hover:border-1',
'transition-all duration-200 shadow-lg',
'focus:outline-none focus:ring-2 focus:ring-gray-700',
'pointer-events-auto'
'pointer-events-auto',
)}
aria-label="Jump to bottom"
>
@ -41,4 +43,4 @@ export const JumpToBottom: React.FC<JumpToBottomProps> = ({ visible, onClick })
</button>
</div>
);
};
};