mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-10 04:28:50 +01:00
🔧 fix: Dev Deployment, Mistral OCR Error, and UI Consistency (#7668)
* 🔧 fix: Update ProgressText and ToolCall components for improved error handling and localization * 🔧 chore: Format ESLint configuration for improved readability and remove unused rule * 🔧 refactor: Simplify ProgressText component logic for better readability and maintainability * 🔧 refactor: Update ProgressText and ToolCall components for improved layout consistency * 🔧 refactor: Simplify icon rendering in TTS components and enhance button rendering logic in HoverButtons * 🔧 refactor: Update placeholder logic in VariableForm component to simply use variable name * fix: .docx. .pptx Mistral OCR Error with `image_limit=0` * chore: Update deploy workflow to include conditions for successful dev branch deployment and streamline deployment steps * ci: Set image_limit to 0 in MistralOCR service tests for consistent behavior
This commit is contained in:
Danny Avila
GitHub
parent
a2fc7d312a
commit
f9d40784f0
10 changed files with 95 additions and 52 deletions
|
|
@ -25,16 +25,16 @@ export function BrowserTTS({
|
|||
content,
|
||||
});
|
||||
|
||||
const renderIcon = (size: string) => {
|
||||
const renderIcon = () => {
|
||||
if (isLoading === true) {
|
||||
return <Spinner size={size} />;
|
||||
return <Spinner className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
}
|
||||
|
||||
if (isSpeaking === true) {
|
||||
return <VolumeMuteIcon size={size} />;
|
||||
return <VolumeMuteIcon className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
}
|
||||
|
||||
return <VolumeIcon size={size} />;
|
||||
return <VolumeIcon className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -68,13 +68,13 @@ export function BrowserTTS({
|
|||
renderButton({
|
||||
onClick: handleClick,
|
||||
title: title,
|
||||
icon: renderIcon('19'),
|
||||
icon: renderIcon(),
|
||||
isActive: isSpeaking,
|
||||
className,
|
||||
})
|
||||
) : (
|
||||
<button className={className} onClickCapture={handleClick} type="button" title={title}>
|
||||
{renderIcon('19')}
|
||||
{renderIcon()}
|
||||
</button>
|
||||
)}
|
||||
<audio
|
||||
|
|
@ -100,7 +100,14 @@ export function BrowserTTS({
|
|||
);
|
||||
}
|
||||
|
||||
export function ExternalTTS({ isLast, index, messageId, content, className }: TMessageAudio) {
|
||||
export function ExternalTTS({
|
||||
isLast,
|
||||
index,
|
||||
messageId,
|
||||
content,
|
||||
className,
|
||||
renderButton,
|
||||
}: TMessageAudio) {
|
||||
const localize = useLocalize();
|
||||
const playbackRate = useRecoilValue(store.playbackRate);
|
||||
|
||||
|
|
@ -111,16 +118,16 @@ export function ExternalTTS({ isLast, index, messageId, content, className }: TM
|
|||
content,
|
||||
});
|
||||
|
||||
const renderIcon = (size: string) => {
|
||||
const renderIcon = () => {
|
||||
if (isLoading === true) {
|
||||
return <Spinner size={size} />;
|
||||
return <Spinner className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
}
|
||||
|
||||
if (isSpeaking === true) {
|
||||
return <VolumeMuteIcon size={size} />;
|
||||
return <VolumeMuteIcon className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
}
|
||||
|
||||
return <VolumeIcon size={size} />;
|
||||
return <VolumeIcon className="icon-md-heavy h-[18px] w-[18px]" />;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -141,19 +148,33 @@ export function ExternalTTS({ isLast, index, messageId, content, className }: TM
|
|||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className={className}
|
||||
onClickCapture={() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.muted = false;
|
||||
}
|
||||
toggleSpeech();
|
||||
}}
|
||||
type="button"
|
||||
title={isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
|
||||
>
|
||||
{renderIcon('19')}
|
||||
</button>
|
||||
{renderButton ? (
|
||||
renderButton({
|
||||
onClick: () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.muted = false;
|
||||
}
|
||||
toggleSpeech();
|
||||
},
|
||||
title: isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud'),
|
||||
icon: renderIcon(),
|
||||
isActive: isSpeaking,
|
||||
className,
|
||||
})
|
||||
) : (
|
||||
<button
|
||||
onClickCapture={() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.muted = false;
|
||||
}
|
||||
toggleSpeech();
|
||||
}}
|
||||
type="button"
|
||||
title={isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
|
||||
>
|
||||
{renderIcon()}
|
||||
</button>
|
||||
)}
|
||||
<audio
|
||||
ref={audioRef}
|
||||
controls
|
||||
|
|
|
|||
|
|
@ -59,7 +59,30 @@ export default function ProgressText({
|
|||
isExpanded?: boolean;
|
||||
error?: boolean;
|
||||
}) {
|
||||
const text = progress < 1 ? (authText ?? inProgressText) : finishedText;
|
||||
const getText = () => {
|
||||
if (error) {
|
||||
return finishedText;
|
||||
}
|
||||
if (progress < 1) {
|
||||
return authText ?? inProgressText;
|
||||
}
|
||||
return finishedText;
|
||||
};
|
||||
|
||||
const getIcon = () => {
|
||||
if (error) {
|
||||
return <CancelledIcon />;
|
||||
}
|
||||
if (progress < 1) {
|
||||
return <Spinner />;
|
||||
}
|
||||
return <FinishedIcon />;
|
||||
};
|
||||
|
||||
const text = getText();
|
||||
const icon = getIcon();
|
||||
const showShimmer = progress < 1 && !error;
|
||||
|
||||
return (
|
||||
<Wrapper popover={popover}>
|
||||
<button
|
||||
|
|
@ -71,13 +94,13 @@ export default function ProgressText({
|
|||
disabled={!hasInput}
|
||||
onClick={hasInput ? onClick : undefined}
|
||||
>
|
||||
{progress < 1 ? <Spinner /> : error ? <CancelledIcon /> : <FinishedIcon />}
|
||||
<span className={`${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
|
||||
{icon}
|
||||
<span className={showShimmer ? 'shimmer' : ''}>{text}</span>
|
||||
{hasInput &&
|
||||
(isExpanded ? (
|
||||
<ChevronUp className="size-4 translate-y-[1px]" />
|
||||
<ChevronUp className="size-4 shrink-0 translate-y-[1px]" />
|
||||
) : (
|
||||
<ChevronDown className="size-4 translate-y-[1px]" />
|
||||
<ChevronDown className="size-4 shrink-0 translate-y-[1px]" />
|
||||
))}
|
||||
</button>
|
||||
</Wrapper>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export default function ToolCall({
|
|||
|
||||
const getFinishedText = () => {
|
||||
if (cancelled) {
|
||||
return localize('com_ui_error');
|
||||
return localize('com_ui_cancelled');
|
||||
}
|
||||
if (isMCPToolCall === true) {
|
||||
return localize('com_assistants_completed_function', { 0: function_name });
|
||||
|
|
@ -153,7 +153,7 @@ export default function ToolCall({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
|
||||
<div className="relative my-2.5 flex h-5 shrink-0 items-center gap-2.5">
|
||||
<ProgressText
|
||||
progress={progress}
|
||||
onClick={() => setShowInfo((prev) => !prev)}
|
||||
|
|
|
|||
|
|
@ -162,18 +162,6 @@ const HoverButtons = ({
|
|||
|
||||
const { isCreatedByUser, error } = message;
|
||||
|
||||
const buttonStyle = cn(
|
||||
'hover-button rounded-lg p-1.5',
|
||||
'hover:bg-gray-100 hover:text-gray-500',
|
||||
'dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200',
|
||||
'disabled:dark:hover:text-gray-400',
|
||||
'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible',
|
||||
!isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100',
|
||||
'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
|
||||
'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700',
|
||||
);
|
||||
|
||||
// If message has an error, only show regenerate button
|
||||
if (error === true) {
|
||||
return (
|
||||
<div className="visible flex justify-center self-end lg:justify-start">
|
||||
|
|
@ -204,9 +192,9 @@ const HoverButtons = ({
|
|||
{TextToSpeech && (
|
||||
<MessageAudio
|
||||
index={index}
|
||||
isLast={isLast}
|
||||
messageId={message.messageId}
|
||||
content={extractMessageContent(message)}
|
||||
isLast={isLast}
|
||||
renderButton={(props) => (
|
||||
<HoverButton
|
||||
onClick={props.onClick}
|
||||
|
|
@ -214,7 +202,6 @@ const HoverButtons = ({
|
|||
icon={props.icon}
|
||||
isActive={props.isActive}
|
||||
isLast={isLast}
|
||||
className={props.className}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ export default function VariableForm({
|
|||
return (
|
||||
<InputCombobox
|
||||
options={field.config.options || []}
|
||||
placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
|
||||
placeholder={field.config.variable}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'rounded px-3 py-2 focus:bg-surface-tertiary',
|
||||
|
|
@ -191,7 +191,7 @@ export default function VariableForm({
|
|||
defaultTextProps,
|
||||
'rounded px-3 py-2 focus:bg-surface-tertiary',
|
||||
)}
|
||||
placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
|
||||
placeholder={field.config.variable}
|
||||
maxRows={8}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue