🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)

* refactor(DropdownPopup): set MenuButton `as` prop to `div` to prevent React warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

* refactor: memoize ChatGroupItem and ControlCombobox components

* refactor(OpenAIClient): await stream process finish before finalCompletion event handling

* refactor: update useSSE.ts typing to handle null and undefined values in data properties

* refactor: set abort scroll to false on SSE connection open

* refactor: improve logger functionality with filter support

* refactor: update handleScroll typing in MessageContainer component

* refactor: update logger.dir call in useChatFunctions to log 'message_stream' tag format instead of the entire submission object as first arg

* refactor: fix null check for message object in Message component

* refactor: throttle handleScroll to help prevent auto-scrolling issues on new message requests; fix type issues within useMessageProcess

* refactor: add abortScrollByIndex logging effect

* refactor: update MessageIcon and Icon components to use React.memo for performance optimization

* refactor: memoize ConvoIconURL component for performance optimization

* chore: type issues

* chore: update package version to 0.7.414
This commit is contained in:
Danny Avila 2024-08-21 18:18:45 -04:00 committed by GitHub
parent ba9c351435
commit 98b437edd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 282 additions and 176 deletions

View file

@ -1,37 +1,44 @@
const isDevelopment = import.meta.env.MODE === 'development';
const isLoggerEnabled = import.meta.env.VITE_ENABLE_LOGGER === 'true';
const loggerFilter = import.meta.env.VITE_LOGGER_FILTER || '';
const logger = {
log: (...args: unknown[]) => {
type LogFunction = (...args: unknown[]) => void;
const createLogFunction = (consoleMethod: LogFunction): LogFunction => {
return (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.log(...args);
const tag = typeof args[0] === 'string' ? args[0] : '';
if (shouldLog(tag)) {
if (tag && args.length > 1) {
consoleMethod(`[${tag}]`, ...args.slice(1));
} else {
consoleMethod(...args);
}
}
}
},
warn: (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.warn(...args);
}
},
error: (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.error(...args);
}
},
info: (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.info(...args);
}
},
debug: (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.debug(...args);
}
},
dir: (...args: unknown[]) => {
if (isDevelopment || isLoggerEnabled) {
console.dir(...args);
}
},
};
};
const logger = {
log: createLogFunction(console.log),
warn: createLogFunction(console.warn),
error: createLogFunction(console.error),
info: createLogFunction(console.info),
debug: createLogFunction(console.debug),
dir: createLogFunction(console.dir),
};
function shouldLog(tag: string): boolean {
if (!loggerFilter) {
return true;
}
/* If no tag is provided, always log */
if (!tag) {
return true;
}
return loggerFilter
.split(',')
.some((filter) => tag.toLowerCase().includes(filter.trim().toLowerCase()));
}
export default logger;