@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
60 lines (59 loc) • 2.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { Grid } from '@servicetitan/anvil2';
import { Spinner } from '../spinner';
import * as styles from './content.module.less';
export const Content = ({ children, itemsLength, loading = false, className })=>{
const chatEndRef = useRef(null);
const containerRef = useRef(null);
const [isInitialLoad, setIsInitialLoad] = useState(true);
const [previousMessageCount, setPreviousMessageCount] = useState(0);
const scrollToBottom = (smooth = true)=>{
if (smooth) {
var _chatEndRef_current;
(_chatEndRef_current = chatEndRef.current) === null || _chatEndRef_current === void 0 ? void 0 : _chatEndRef_current.scrollIntoView({
behavior: 'smooth',
block: 'end'
});
} else {
var _chatEndRef_current1;
(_chatEndRef_current1 = chatEndRef.current) === null || _chatEndRef_current1 === void 0 ? void 0 : _chatEndRef_current1.scrollIntoView({
behavior: 'auto',
block: 'end'
});
}
};
useEffect(()=>{
if (isInitialLoad && itemsLength > 0) {
// Initial load: scroll to bottom without smooth animation
scrollToBottom(false);
setIsInitialLoad(false);
setPreviousMessageCount(itemsLength);
} else if (!isInitialLoad && itemsLength > previousMessageCount) {
// New messages added: scroll to bottom with smooth animation
scrollToBottom(true);
setPreviousMessageCount(itemsLength);
} else if (!isInitialLoad && itemsLength !== previousMessageCount) {
// Message count changed but not increased (e.g., conversation switched)
// Just update the count without scrolling
setPreviousMessageCount(itemsLength);
}
}, [
itemsLength,
isInitialLoad,
previousMessageCount
]);
return /*#__PURE__*/ _jsxs(Grid, {
className: classNames(styles.chatContent, className),
ref: containerRef,
gridColumn: "1 / 13",
children: [
loading ? /*#__PURE__*/ _jsx(Spinner, {}) : children,
/*#__PURE__*/ _jsx("div", {
ref: chatEndRef
})
]
});
};
//# sourceMappingURL=content.js.map