phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-08-16 06:27:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(UI): Adding linter and prettier for UI (#3156)

Browse source
This commit is contained in:
Francisco Arceo 2025-08-14 15:58:43 -06:00 • committed by GitHub
parent 61582f327c
commit e69acbafbf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
73 changed files with 1452 additions and 1226 deletions
Download patch file Download diff file Expand all files Collapse all files

50
llama_stack/ui/hooks/use-auto-scroll.ts
View file

@ -1,67 +1,67 @@
import { useEffect, useRef, useState } from "react"
import { useEffect, useRef, useState } from "react";
// How many pixels from the bottom of the container to enable auto-scroll
const ACTIVATION_THRESHOLD = 50
const ACTIVATION_THRESHOLD = 50;
// Minimum pixels of scroll-up movement required to disable auto-scroll
const MIN_SCROLL_UP_THRESHOLD = 10
const MIN_SCROLL_UP_THRESHOLD = 10;
export function useAutoScroll(dependencies: React.DependencyList) {
const containerRef = useRef<HTMLDivElement | null>(null)
const previousScrollTop = useRef<number | null>(null)
const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
const containerRef = useRef<HTMLDivElement | null>(null);
const previousScrollTop = useRef<number | null>(null);
const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
const scrollToBottom = () => {
if (containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight
containerRef.current.scrollTop = containerRef.current.scrollHeight;
}
}
};
const handleScroll = () => {
if (containerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = containerRef.current
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
const distanceFromBottom = Math.abs(
scrollHeight - scrollTop - clientHeight
)
);
const isScrollingUp = previousScrollTop.current
? scrollTop < previousScrollTop.current
: false
: false;
const scrollUpDistance = previousScrollTop.current
? previousScrollTop.current - scrollTop
: 0
: 0;
const isDeliberateScrollUp =
isScrollingUp && scrollUpDistance > MIN_SCROLL_UP_THRESHOLD
isScrollingUp && scrollUpDistance > MIN_SCROLL_UP_THRESHOLD;
if (isDeliberateScrollUp) {
setShouldAutoScroll(false)
setShouldAutoScroll(false);
} else {
const isScrolledToBottom = distanceFromBottom < ACTIVATION_THRESHOLD
setShouldAutoScroll(isScrolledToBottom)
const isScrolledToBottom = distanceFromBottom < ACTIVATION_THRESHOLD;
setShouldAutoScroll(isScrolledToBottom);
}
previousScrollTop.current = scrollTop
previousScrollTop.current = scrollTop;
}
}
};
const handleTouchStart = () => {
setShouldAutoScroll(false)
}
setShouldAutoScroll(false);
};
useEffect(() => {
if (containerRef.current) {
previousScrollTop.current = containerRef.current.scrollTop
previousScrollTop.current = containerRef.current.scrollTop;
}
}, [])
}, []);
useEffect(() => {
if (shouldAutoScroll) {
scrollToBottom()
scrollToBottom();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies)
}, dependencies);
return {
containerRef,
@ -69,5 +69,5 @@ export function useAutoScroll(dependencies: React.DependencyList) {
handleScroll,
shouldAutoScroll,
handleTouchStart,
}
};
}