mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-23 11:50:14 +01:00
📈 feat: Chat rating for feedback (#5878)
* feat: working started for feedback implementation. TODO: - needs some refactoring. - needs some UI animations. * feat: working rate functionality * feat: works now as well to reader the already rated responses from the server. * feat: added the option to give feedback in text (optional) * feat: added Dismiss option `x` to the `FeedbackTagOptions` * ✨ feat: Add rating and ratingContent fields to message schema * 🔧 chore: Bump version to 0.0.3 in package.json * ✨ feat: Enhance feedback localization and update UI elements * 🚀 feat: Implement feedback tagging system with thumbs up/down options * 🚀 feat: Add data-provider package to unused i18n keys detection * 🎨 style: update HoverButtons' style * 🎨 style: Update HoverButtons and Fork components for improved styling and visibility * 🔧 feat: Implement feedback system with rating and content options * 🔧 feat: Enhance feedback handling with improved rating toggle and tag options * 🔧 feat: Integrate toast notifications for feedback submission and clean up unused state * 🔧 feat: Remove unused feedback tag options from translation file * ✨ refactor: clean up Feedback component and improve HoverButtons structure * ✨ refactor: remove unused settings switches for auto scroll, hide side panel, and user message markdown * refactor: reorganize import order * ✨ refactor: enhance HoverButtons and Fork components with improved styles and animations * ✨ refactor: update feedback response phrases for improved user engagement * ✨ refactor: add CheckboxOption component and streamline fork options rendering * Refactor feedback components and logic - Consolidated feedback handling into a single Feedback component, removing FeedbackButtons and FeedbackTagOptions. - Introduced new feedback tagging system with detailed tags for both thumbs up and thumbs down ratings. - Updated feedback schema to include new tags and improved type definitions. - Enhanced user interface for feedback collection, including a dialog for additional comments. - Removed obsolete files and adjusted imports accordingly. - Updated translations for new feedback tags and placeholders. * ✨ refactor: update feedback handling by replacing rating fields with feedback in message updates * fix: add missing validateMessageReq middleware to feedback route and refactor feedback system * 🗑️ chore: Remove redundant fork option explanations from translation file * 🔧 refactor: Remove unused dependency from feedback callback * 🔧 refactor: Simplify message update response structure and improve error logging * Chore: removed unused tests. --------- Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Ruben Talstra
GitHub
parent
4808c5be48
commit
4cbab86b45
76 changed files with 1592 additions and 835 deletions
|
|
@ -102,12 +102,12 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
|
|||
if (endpoint.hasModels) {
|
||||
const filteredModels = searchValue
|
||||
? filterModels(
|
||||
endpoint,
|
||||
(endpoint.models || []).map((model) => model.name),
|
||||
searchValue,
|
||||
agentsMap,
|
||||
assistantsMap,
|
||||
)
|
||||
endpoint,
|
||||
(endpoint.models || []).map((model) => model.name),
|
||||
searchValue,
|
||||
agentsMap,
|
||||
assistantsMap,
|
||||
)
|
||||
: null;
|
||||
const placeholder =
|
||||
isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)
|
||||
|
|
|
|||
|
|
@ -45,10 +45,10 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
|
|||
</div>
|
||||
) : (isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)) &&
|
||||
endpoint.icon ? (
|
||||
<div className="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
|
||||
{endpoint.icon}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
|
||||
{endpoint.icon}
|
||||
</div>
|
||||
) : null}
|
||||
<span>{modelName}</span>
|
||||
</div>
|
||||
{isGlobal && <EarthIcon className="ml-auto size-4 text-green-400" />}
|
||||
|
|
|
|||
|
|
@ -102,22 +102,22 @@ export function SearchResults({ results, localize, searchValue }: SearchResultsP
|
|||
const filteredModels = endpoint.label.toLowerCase().includes(lowerQuery)
|
||||
? endpoint.models
|
||||
: endpoint.models.filter((model) => {
|
||||
let modelName = model.name;
|
||||
if (
|
||||
isAgentsEndpoint(endpoint.value) &&
|
||||
let modelName = model.name;
|
||||
if (
|
||||
isAgentsEndpoint(endpoint.value) &&
|
||||
endpoint.agentNames &&
|
||||
endpoint.agentNames[model.name]
|
||||
) {
|
||||
modelName = endpoint.agentNames[model.name];
|
||||
} else if (
|
||||
isAssistantsEndpoint(endpoint.value) &&
|
||||
) {
|
||||
modelName = endpoint.agentNames[model.name];
|
||||
} else if (
|
||||
isAssistantsEndpoint(endpoint.value) &&
|
||||
endpoint.assistantNames &&
|
||||
endpoint.assistantNames[model.name]
|
||||
) {
|
||||
modelName = endpoint.assistantNames[model.name];
|
||||
}
|
||||
return modelName.toLowerCase().includes(lowerQuery);
|
||||
});
|
||||
) {
|
||||
modelName = endpoint.assistantNames[model.name];
|
||||
}
|
||||
return modelName.toLowerCase().includes(lowerQuery);
|
||||
});
|
||||
|
||||
if (!filteredModels.length) {
|
||||
return null; // skip if no models match
|
||||
|
|
|
|||
347
client/src/components/Chat/Messages/Feedback.tsx
Normal file
347
client/src/components/Chat/Messages/Feedback.tsx
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import * as Ariakit from '@ariakit/react';
|
||||
import { TFeedback, TFeedbackTag, getTagsForRating } from 'librechat-data-provider';
|
||||
import {
|
||||
AlertCircle,
|
||||
PenTool,
|
||||
ImageOff,
|
||||
Ban,
|
||||
HelpCircle,
|
||||
CheckCircle,
|
||||
Lightbulb,
|
||||
Search,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
Button,
|
||||
OGDialog,
|
||||
OGDialogContent,
|
||||
OGDialogTitle,
|
||||
ThumbUpIcon,
|
||||
ThumbDownIcon,
|
||||
} from '~/components';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface FeedbackProps {
|
||||
handleFeedback: ({ feedback }: { feedback: TFeedback | undefined }) => void;
|
||||
feedback?: TFeedback;
|
||||
isLast?: boolean;
|
||||
}
|
||||
|
||||
const ICONS = {
|
||||
AlertCircle,
|
||||
PenTool,
|
||||
ImageOff,
|
||||
Ban,
|
||||
HelpCircle,
|
||||
CheckCircle,
|
||||
Lightbulb,
|
||||
Search,
|
||||
ThumbsUp: ThumbUpIcon,
|
||||
ThumbsDown: ThumbDownIcon,
|
||||
};
|
||||
|
||||
function FeedbackOptionButton({
|
||||
tag,
|
||||
active,
|
||||
onClick,
|
||||
}: {
|
||||
tag: TFeedbackTag;
|
||||
active?: boolean;
|
||||
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const Icon = ICONS[tag.icon as keyof typeof ICONS] || AlertCircle;
|
||||
const label = localize(tag.label as Parameters<typeof localize>[0]);
|
||||
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'flex w-full items-center gap-3 rounded-xl p-2 text-text-secondary transition-colors duration-200 hover:bg-surface-hover hover:text-text-primary',
|
||||
active && 'bg-surface-hover font-semibold text-text-primary',
|
||||
)}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
aria-pressed={active}
|
||||
>
|
||||
<Icon size="19" bold={active} />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function FeedbackButtons({
|
||||
isLast,
|
||||
feedback,
|
||||
onFeedback,
|
||||
onOther,
|
||||
}: {
|
||||
isLast: boolean;
|
||||
feedback?: TFeedback;
|
||||
onFeedback: (fb: TFeedback | undefined) => void;
|
||||
onOther?: () => void;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const upStore = Ariakit.usePopoverStore({ placement: 'bottom' });
|
||||
const downStore = Ariakit.usePopoverStore({ placement: 'bottom' });
|
||||
|
||||
const positiveTags = useMemo(() => getTagsForRating('thumbsUp'), []);
|
||||
const negativeTags = useMemo(() => getTagsForRating('thumbsDown'), []);
|
||||
|
||||
const upActive = feedback?.rating === 'thumbsUp' ? feedback.tag?.key : undefined;
|
||||
const downActive = feedback?.rating === 'thumbsDown' ? feedback.tag?.key : undefined;
|
||||
|
||||
const handleThumbsUpClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
if (feedback?.rating !== 'thumbsUp') {
|
||||
upStore.toggle();
|
||||
return;
|
||||
}
|
||||
onFeedback(undefined);
|
||||
},
|
||||
[feedback, onFeedback, upStore],
|
||||
);
|
||||
|
||||
const handleUpOption = useCallback(
|
||||
(tag: TFeedbackTag) => (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
upStore.hide();
|
||||
onFeedback({ rating: 'thumbsUp', tag });
|
||||
if (tag.key === 'other') {
|
||||
onOther?.();
|
||||
}
|
||||
},
|
||||
[onFeedback, onOther, upStore],
|
||||
);
|
||||
|
||||
const handleThumbsDownClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
if (feedback?.rating !== 'thumbsDown') {
|
||||
downStore.toggle();
|
||||
return;
|
||||
}
|
||||
|
||||
onOther?.();
|
||||
},
|
||||
[feedback, onOther, downStore],
|
||||
);
|
||||
|
||||
const handleDownOption = useCallback(
|
||||
(tag: TFeedbackTag) => (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
downStore.hide();
|
||||
onFeedback({ rating: 'thumbsDown', tag });
|
||||
if (tag.key === 'other') {
|
||||
onOther?.();
|
||||
}
|
||||
},
|
||||
[onFeedback, onOther, downStore],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Ariakit.PopoverAnchor
|
||||
store={upStore}
|
||||
render={
|
||||
<button
|
||||
className={buttonClasses(feedback?.rating === 'thumbsUp', isLast)}
|
||||
onClick={handleThumbsUpClick}
|
||||
type="button"
|
||||
title={localize('com_ui_feedback_positive')}
|
||||
aria-pressed={feedback?.rating === 'thumbsUp'}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<ThumbUpIcon size="19" bold={feedback?.rating === 'thumbsUp'} />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<Ariakit.Popover
|
||||
store={upStore}
|
||||
gutter={8}
|
||||
portal
|
||||
unmountOnHide
|
||||
className="popover-animate flex w-auto flex-col gap-1.5 overflow-hidden rounded-2xl border border-border-medium bg-surface-secondary p-1.5 shadow-lg"
|
||||
>
|
||||
<div className="flex flex-col items-stretch justify-center">
|
||||
{positiveTags.map((tag) => (
|
||||
<FeedbackOptionButton
|
||||
key={tag.key}
|
||||
tag={tag}
|
||||
active={upActive === tag.key}
|
||||
onClick={handleUpOption(tag)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Ariakit.Popover>
|
||||
|
||||
<Ariakit.PopoverAnchor
|
||||
store={downStore}
|
||||
render={
|
||||
<button
|
||||
className={buttonClasses(feedback?.rating === 'thumbsDown', isLast)}
|
||||
onClick={handleThumbsDownClick}
|
||||
type="button"
|
||||
title={localize('com_ui_feedback_negative')}
|
||||
aria-pressed={feedback?.rating === 'thumbsDown'}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<ThumbDownIcon size="19" bold={feedback?.rating === 'thumbsDown'} />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<Ariakit.Popover
|
||||
store={downStore}
|
||||
gutter={8}
|
||||
portal
|
||||
unmountOnHide
|
||||
className="popover-animate flex w-auto flex-col gap-1.5 overflow-hidden rounded-2xl border border-border-medium bg-surface-secondary p-1.5 shadow-lg"
|
||||
>
|
||||
<div className="flex flex-col items-stretch justify-center">
|
||||
{negativeTags.map((tag) => (
|
||||
<FeedbackOptionButton
|
||||
key={tag.key}
|
||||
tag={tag}
|
||||
active={downActive === tag.key}
|
||||
onClick={handleDownOption(tag)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Ariakit.Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function buttonClasses(isActive: boolean, isLast: boolean) {
|
||||
return cn(
|
||||
'hover-button rounded-lg p-1.5',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
|
||||
'hover:bg-gray-100 hover:text-gray-500',
|
||||
'data-[state=open]:active data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500',
|
||||
isActive ? 'text-gray-500 dark:text-gray-200 font-bold' : 'dark:text-gray-400/70',
|
||||
'dark:hover:bg-gray-700 dark:hover:text-gray-200',
|
||||
'data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
|
||||
'disabled:dark:hover:text-gray-400',
|
||||
isLast
|
||||
? ''
|
||||
: 'data-[state=open]:opacity-100 md:opacity-0 md:group-focus-within:opacity-100 md:group-hover:opacity-100',
|
||||
'md:group-focus-within:visible md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
);
|
||||
}
|
||||
|
||||
export default function Feedback({
|
||||
isLast = false,
|
||||
handleFeedback,
|
||||
feedback: initialFeedback,
|
||||
}: FeedbackProps) {
|
||||
const localize = useLocalize();
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [feedback, setFeedback] = useState<TFeedback | undefined>(initialFeedback);
|
||||
|
||||
useEffect(() => {
|
||||
setFeedback(initialFeedback);
|
||||
}, [initialFeedback]);
|
||||
|
||||
const propagateMinimal = useCallback(
|
||||
(fb: TFeedback | undefined) => {
|
||||
setFeedback(fb);
|
||||
handleFeedback({ feedback: fb });
|
||||
},
|
||||
[handleFeedback],
|
||||
);
|
||||
|
||||
const handleButtonFeedback = useCallback(
|
||||
(fb: TFeedback | undefined) => {
|
||||
if (fb?.tag?.key === 'other') setOpenDialog(true);
|
||||
else setOpenDialog(false);
|
||||
propagateMinimal(fb);
|
||||
},
|
||||
[propagateMinimal],
|
||||
);
|
||||
|
||||
const handleOtherOpen = useCallback(() => setOpenDialog(true), []);
|
||||
|
||||
const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setFeedback((prev) => (prev ? { ...prev, text: e.target.value } : undefined));
|
||||
};
|
||||
|
||||
const handleDialogSave = useCallback(() => {
|
||||
if (feedback?.tag?.key === 'other' && !feedback?.text?.trim()) {
|
||||
return;
|
||||
}
|
||||
propagateMinimal(feedback);
|
||||
setOpenDialog(false);
|
||||
}, [feedback, propagateMinimal]);
|
||||
|
||||
const handleDialogClear = useCallback(() => {
|
||||
setFeedback(undefined);
|
||||
handleFeedback({ feedback: undefined });
|
||||
setOpenDialog(false);
|
||||
}, [handleFeedback]);
|
||||
|
||||
const renderSingleFeedbackButton = () => {
|
||||
if (!feedback) return null;
|
||||
const isThumbsUp = feedback.rating === 'thumbsUp';
|
||||
const Icon = isThumbsUp ? ThumbUpIcon : ThumbDownIcon;
|
||||
const label = isThumbsUp
|
||||
? localize('com_ui_feedback_positive')
|
||||
: localize('com_ui_feedback_negative');
|
||||
return (
|
||||
<button
|
||||
className={buttonClasses(true, isLast)}
|
||||
onClick={() => {
|
||||
if (isThumbsUp) {
|
||||
handleButtonFeedback(undefined);
|
||||
} else {
|
||||
setOpenDialog(true);
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
title={label}
|
||||
aria-pressed="true"
|
||||
>
|
||||
<Icon size="19" bold />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{feedback ? (
|
||||
renderSingleFeedbackButton()
|
||||
) : (
|
||||
<FeedbackButtons
|
||||
isLast={isLast}
|
||||
feedback={feedback}
|
||||
onFeedback={handleButtonFeedback}
|
||||
onOther={handleOtherOpen}
|
||||
/>
|
||||
)}
|
||||
<OGDialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<OGDialogContent className="w-11/12 max-w-lg">
|
||||
<OGDialogTitle className="text-token-text-primary text-lg font-semibold leading-6">
|
||||
{localize('com_ui_feedback_more_information')}
|
||||
</OGDialogTitle>
|
||||
<textarea
|
||||
className="w-full rounded-xl border border-border-light bg-transparent p-2 text-text-primary"
|
||||
value={feedback?.text || ''}
|
||||
onChange={handleTextChange}
|
||||
rows={4}
|
||||
placeholder={localize('com_ui_feedback_placeholder')}
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="mt-4 flex items-end justify-end gap-2">
|
||||
<Button variant="destructive" onClick={handleDialogClear}>
|
||||
{localize('com_ui_delete')}
|
||||
</Button>
|
||||
<Button variant="submit" onClick={handleDialogSave} disabled={!feedback?.text?.trim()}>
|
||||
{localize('com_ui_save')}
|
||||
</Button>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
424
client/src/components/Chat/Messages/Fork.tsx
Normal file
424
client/src/components/Chat/Messages/Fork.tsx
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import * as Ariakit from '@ariakit/react';
|
||||
import { VisuallyHidden } from '@ariakit/react';
|
||||
import { GitFork, InfoIcon } from 'lucide-react';
|
||||
import { ForkOptions } from 'librechat-data-provider';
|
||||
import { GitCommit, GitBranchPlus, ListTree } from 'lucide-react';
|
||||
import { TranslationKeys, useLocalize, useNavigateToConvo } from '~/hooks';
|
||||
import { useForkConvoMutation } from '~/data-provider';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
interface PopoverButtonProps {
|
||||
children: React.ReactNode;
|
||||
setting: ForkOptions;
|
||||
onClick: (setting: ForkOptions) => void;
|
||||
setActiveSetting: React.Dispatch<React.SetStateAction<TranslationKeys>>;
|
||||
timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
|
||||
hoverInfo?: React.ReactNode | string;
|
||||
hoverTitle?: React.ReactNode | string;
|
||||
hoverDescription?: React.ReactNode | string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const optionLabels: Record<ForkOptions, TranslationKeys> = {
|
||||
[ForkOptions.DIRECT_PATH]: 'com_ui_fork_visible',
|
||||
[ForkOptions.INCLUDE_BRANCHES]: 'com_ui_fork_branches',
|
||||
[ForkOptions.TARGET_LEVEL]: 'com_ui_fork_all_target',
|
||||
[ForkOptions.DEFAULT]: 'com_ui_fork_from_message',
|
||||
};
|
||||
|
||||
const chevronDown = (
|
||||
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const PopoverButton: React.FC<PopoverButtonProps> = ({
|
||||
children,
|
||||
setting,
|
||||
onClick,
|
||||
setActiveSetting,
|
||||
timeoutRef,
|
||||
hoverInfo,
|
||||
hoverTitle,
|
||||
hoverDescription,
|
||||
label,
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<Ariakit.HovercardProvider placement="right-start">
|
||||
<div className="flex flex-col items-center">
|
||||
<Ariakit.HovercardAnchor
|
||||
render={
|
||||
<Ariakit.Button
|
||||
onClick={() => onClick(setting)}
|
||||
onMouseEnter={() => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = null;
|
||||
}
|
||||
setActiveSetting(optionLabels[setting]);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setActiveSetting(optionLabels[ForkOptions.DEFAULT]);
|
||||
}, 175);
|
||||
}}
|
||||
className="mx-0.5 w-14 flex-1 rounded-xl border-2 border-border-medium bg-surface-secondary text-text-secondary transition duration-200 ease-in-out hover:bg-surface-hover hover:text-text-primary"
|
||||
aria-label={label}
|
||||
>
|
||||
{children}
|
||||
<VisuallyHidden>{label}</VisuallyHidden>
|
||||
</Ariakit.Button>
|
||||
}
|
||||
/>
|
||||
<Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
|
||||
<VisuallyHidden>
|
||||
{localize('com_ui_fork_more_details_about', { 0: label })}
|
||||
</VisuallyHidden>
|
||||
{chevronDown}
|
||||
</Ariakit.HovercardDisclosure>
|
||||
{((hoverInfo != null && hoverInfo !== '') ||
|
||||
(hoverTitle != null && hoverTitle !== '') ||
|
||||
(hoverDescription != null && hoverDescription !== '')) && (
|
||||
<Ariakit.Hovercard
|
||||
gutter={16}
|
||||
shift={40}
|
||||
flip={false}
|
||||
className="z-[999] w-80 rounded-2xl border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
|
||||
portal={true}
|
||||
unmountOnHide={true}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<p className="flex flex-col gap-2 text-sm text-text-secondary">
|
||||
{hoverInfo && hoverInfo}
|
||||
{hoverTitle && <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>}
|
||||
{hoverDescription && hoverDescription}
|
||||
</p>
|
||||
</div>
|
||||
</Ariakit.Hovercard>
|
||||
)}
|
||||
</div>
|
||||
</Ariakit.HovercardProvider>
|
||||
);
|
||||
};
|
||||
|
||||
interface CheckboxOptionProps {
|
||||
id: string;
|
||||
checked: boolean;
|
||||
onToggle: (checked: boolean) => void;
|
||||
labelKey: TranslationKeys;
|
||||
infoKey: TranslationKeys;
|
||||
showToastOnCheck?: boolean;
|
||||
}
|
||||
const CheckboxOption: React.FC<CheckboxOptionProps> = ({
|
||||
id,
|
||||
checked,
|
||||
onToggle,
|
||||
labelKey,
|
||||
infoKey,
|
||||
showToastOnCheck = false,
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
return (
|
||||
<Ariakit.HovercardProvider placement="right-start">
|
||||
<div className="flex items-center">
|
||||
<div className="flex h-6 w-full select-none items-center justify-start rounded-md text-sm text-text-secondary hover:text-text-primary">
|
||||
<Ariakit.HovercardAnchor
|
||||
render={
|
||||
<div>
|
||||
<Ariakit.Checkbox
|
||||
id={id}
|
||||
checked={checked}
|
||||
onChange={(e) => {
|
||||
const value = e.target.checked;
|
||||
if (value && showToastOnCheck) {
|
||||
showToast({
|
||||
message: localize('com_ui_fork_remember_checked'),
|
||||
status: 'info',
|
||||
});
|
||||
}
|
||||
onToggle(value);
|
||||
}}
|
||||
className="h-4 w-4 rounded-sm border border-primary ring-offset-background transition duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
|
||||
aria-label={localize(labelKey)}
|
||||
/>
|
||||
<label htmlFor={id} className="ml-2 cursor-pointer">
|
||||
{localize(labelKey)}
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
|
||||
<VisuallyHidden>{localize(infoKey)}</VisuallyHidden>
|
||||
{chevronDown}
|
||||
</Ariakit.HovercardDisclosure>
|
||||
</div>
|
||||
<Ariakit.Hovercard
|
||||
gutter={14}
|
||||
shift={40}
|
||||
flip={false}
|
||||
className="z-[999] w-80 rounded-2xl border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
|
||||
portal={true}
|
||||
unmountOnHide={true}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-text-secondary">{localize(infoKey)}</p>
|
||||
</div>
|
||||
</Ariakit.Hovercard>
|
||||
</Ariakit.HovercardProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Fork({
|
||||
messageId,
|
||||
conversationId: _convoId,
|
||||
forkingSupported = false,
|
||||
latestMessageId,
|
||||
isLast = false,
|
||||
}: {
|
||||
messageId: string;
|
||||
conversationId: string | null;
|
||||
forkingSupported?: boolean;
|
||||
latestMessageId?: string;
|
||||
isLast?: boolean;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const [remember, setRemember] = useState(false);
|
||||
const { navigateToConvo } = useNavigateToConvo();
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const [forkSetting, setForkSetting] = useRecoilState(store.forkSetting);
|
||||
const [activeSetting, setActiveSetting] = useState(optionLabels.default);
|
||||
const [splitAtTarget, setSplitAtTarget] = useRecoilState(store.splitAtTarget);
|
||||
const [rememberGlobal, setRememberGlobal] = useRecoilState(store.rememberDefaultFork);
|
||||
const popoverStore = Ariakit.usePopoverStore({
|
||||
placement: 'bottom',
|
||||
});
|
||||
|
||||
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',
|
||||
isActive && 'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700',
|
||||
);
|
||||
|
||||
const forkConvo = useForkConvoMutation({
|
||||
onSuccess: (data) => {
|
||||
navigateToConvo(data.conversation);
|
||||
showToast({
|
||||
message: localize('com_ui_fork_success'),
|
||||
status: 'success',
|
||||
});
|
||||
},
|
||||
onMutate: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_fork_processing'),
|
||||
status: 'info',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_fork_error'),
|
||||
status: 'error',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const conversationId = _convoId ?? '';
|
||||
if (!forkingSupported || !conversationId || !messageId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const onClick = (option: string) => {
|
||||
if (remember) {
|
||||
setRememberGlobal(true);
|
||||
setForkSetting(option);
|
||||
}
|
||||
|
||||
forkConvo.mutate({
|
||||
messageId,
|
||||
conversationId,
|
||||
option,
|
||||
splitAtTarget,
|
||||
latestMessageId,
|
||||
});
|
||||
};
|
||||
|
||||
const forkOptionsConfig = [
|
||||
{
|
||||
setting: ForkOptions.DIRECT_PATH,
|
||||
label: localize(optionLabels[ForkOptions.DIRECT_PATH]),
|
||||
icon: <GitCommit className="h-full w-full rotate-90 p-2" />,
|
||||
hoverTitle: (
|
||||
<>
|
||||
<GitCommit className="h-5 w-5 rotate-90" />
|
||||
{localize(optionLabels[ForkOptions.DIRECT_PATH])}
|
||||
</>
|
||||
),
|
||||
hoverDescription: localize('com_ui_fork_info_visible'),
|
||||
},
|
||||
{
|
||||
setting: ForkOptions.INCLUDE_BRANCHES,
|
||||
label: localize(optionLabels[ForkOptions.INCLUDE_BRANCHES]),
|
||||
icon: <GitBranchPlus className="h-full w-full rotate-180 p-2" />,
|
||||
hoverTitle: (
|
||||
<>
|
||||
<GitBranchPlus className="h-4 w-4 rotate-180" />
|
||||
{localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
|
||||
</>
|
||||
),
|
||||
hoverDescription: localize('com_ui_fork_info_branches'),
|
||||
},
|
||||
{
|
||||
setting: ForkOptions.TARGET_LEVEL,
|
||||
label: localize(optionLabels[ForkOptions.TARGET_LEVEL]),
|
||||
icon: <ListTree className="h-full w-full p-2" />,
|
||||
hoverTitle: (
|
||||
<>
|
||||
<ListTree className="h-5 w-5" />
|
||||
{`${localize(optionLabels[ForkOptions.TARGET_LEVEL])} (${localize('com_endpoint_default')})`}
|
||||
</>
|
||||
),
|
||||
hoverDescription: localize('com_ui_fork_info_target'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Ariakit.PopoverAnchor
|
||||
store={popoverStore}
|
||||
render={
|
||||
<button
|
||||
className={buttonStyle}
|
||||
onClick={(e) => {
|
||||
if (rememberGlobal) {
|
||||
e.preventDefault();
|
||||
forkConvo.mutate({
|
||||
messageId,
|
||||
splitAtTarget,
|
||||
conversationId,
|
||||
option: forkSetting,
|
||||
latestMessageId,
|
||||
});
|
||||
} else {
|
||||
popoverStore.toggle();
|
||||
setIsActive(popoverStore.getState().open);
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
aria-label={localize('com_ui_fork')}
|
||||
>
|
||||
<GitFork size="19" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<Ariakit.Popover
|
||||
store={popoverStore}
|
||||
gutter={10}
|
||||
className={`popover-animate ${isActive ? 'open' : ''} flex w-60 flex-col gap-3 overflow-hidden rounded-2xl border border-border-medium bg-surface-secondary p-2 px-4 shadow-lg`}
|
||||
style={{
|
||||
outline: 'none',
|
||||
pointerEvents: 'auto',
|
||||
zIndex: 50,
|
||||
}}
|
||||
portal={true}
|
||||
unmountOnHide={true}
|
||||
onClose={() => setIsActive(false)}
|
||||
>
|
||||
<div className="flex h-8 w-full items-center justify-center text-sm text-text-primary">
|
||||
{localize(activeSetting)}
|
||||
<Ariakit.HovercardProvider placement="right-start">
|
||||
<div className="ml-auto flex h-6 w-6 items-center justify-center gap-1">
|
||||
<Ariakit.HovercardAnchor
|
||||
render={
|
||||
<button
|
||||
className="flex h-5 w-5 cursor-help items-center rounded-full text-text-secondary"
|
||||
aria-label={localize('com_ui_fork_info_button_label')}
|
||||
>
|
||||
<InfoIcon />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
|
||||
<VisuallyHidden>{localize('com_ui_fork_more_info_options')}</VisuallyHidden>
|
||||
{chevronDown}
|
||||
</Ariakit.HovercardDisclosure>
|
||||
</div>
|
||||
<Ariakit.Hovercard
|
||||
gutter={19}
|
||||
shift={40}
|
||||
flip={false}
|
||||
className="z-[999] w-80 rounded-2xl border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
|
||||
portal={true}
|
||||
unmountOnHide={true}
|
||||
>
|
||||
<div className="flex flex-col gap-2 space-y-2 text-sm text-text-secondary">
|
||||
<span>{localize('com_ui_fork_info_1')}</span>
|
||||
<span>{localize('com_ui_fork_info_2')}</span>
|
||||
<span>
|
||||
{localize('com_ui_fork_info_3', {
|
||||
0: localize('com_ui_fork_split_target'),
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</Ariakit.Hovercard>
|
||||
</Ariakit.HovercardProvider>
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center gap-1">
|
||||
{forkOptionsConfig.map((opt) => (
|
||||
<PopoverButton
|
||||
key={opt.setting}
|
||||
setActiveSetting={setActiveSetting}
|
||||
timeoutRef={timeoutRef}
|
||||
onClick={onClick}
|
||||
setting={opt.setting}
|
||||
label={opt.label}
|
||||
hoverTitle={opt.hoverTitle}
|
||||
hoverDescription={opt.hoverDescription}
|
||||
>
|
||||
{opt.icon}
|
||||
</PopoverButton>
|
||||
))}
|
||||
</div>
|
||||
<CheckboxOption
|
||||
id="split-target-checkbox"
|
||||
checked={splitAtTarget}
|
||||
onToggle={setSplitAtTarget}
|
||||
labelKey="com_ui_fork_split_target"
|
||||
infoKey="com_ui_fork_info_start"
|
||||
/>
|
||||
<CheckboxOption
|
||||
id="remember-checkbox"
|
||||
checked={remember}
|
||||
onToggle={(checked) => {
|
||||
if (checked)
|
||||
showToast({ message: localize('com_ui_fork_remember_checked'), status: 'info' });
|
||||
setRemember(checked);
|
||||
}}
|
||||
labelKey="com_ui_fork_remember"
|
||||
infoKey="com_ui_fork_info_remember"
|
||||
showToastOnCheck
|
||||
/>
|
||||
</Ariakit.Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo, memo } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import type { TConversation, TMessage } from 'librechat-data-provider';
|
||||
import { EditIcon, Clipboard, CheckMark, ContinueIcon, RegenerateIcon } from '~/components/svg';
|
||||
import type { TConversation, TMessage, TFeedback } from 'librechat-data-provider';
|
||||
import { EditIcon, Clipboard, CheckMark, ContinueIcon, RegenerateIcon } from '~/components';
|
||||
import { useGenerationsByLatest, useLocalize } from '~/hooks';
|
||||
import { Fork } from '~/components/Conversations';
|
||||
import MessageAudio from './MessageAudio';
|
||||
import Feedback from './Feedback';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
|
|
@ -20,9 +21,97 @@ type THoverButtons = {
|
|||
latestMessage: TMessage | null;
|
||||
isLast: boolean;
|
||||
index: number;
|
||||
handleFeedback: ({ feedback }: { feedback: TFeedback | undefined }) => void;
|
||||
};
|
||||
|
||||
export default function HoverButtons({
|
||||
type HoverButtonProps = {
|
||||
onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
isActive?: boolean;
|
||||
isVisible?: boolean;
|
||||
isDisabled?: boolean;
|
||||
isLast?: boolean;
|
||||
className?: string;
|
||||
buttonStyle?: string;
|
||||
};
|
||||
|
||||
const extractMessageContent = (message: TMessage): string => {
|
||||
if (typeof message.content === 'string') {
|
||||
return message.content;
|
||||
}
|
||||
|
||||
if (Array.isArray(message.content)) {
|
||||
return message.content
|
||||
.map((part) => {
|
||||
if (typeof part === 'string') {
|
||||
return part;
|
||||
}
|
||||
if ('text' in part) {
|
||||
return part.text || '';
|
||||
}
|
||||
if ('think' in part) {
|
||||
const think = part.think;
|
||||
if (typeof think === 'string') {
|
||||
return think;
|
||||
}
|
||||
return think && 'text' in think ? think.text || '' : '';
|
||||
}
|
||||
return '';
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
return message.text || '';
|
||||
};
|
||||
|
||||
const HoverButton = memo(
|
||||
({
|
||||
onClick,
|
||||
title,
|
||||
icon,
|
||||
isActive = false,
|
||||
isVisible = true,
|
||||
isDisabled = false,
|
||||
isLast = false,
|
||||
className = '',
|
||||
}: HoverButtonProps) => {
|
||||
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',
|
||||
!isVisible && 'opacity-0',
|
||||
|
||||
'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
|
||||
|
||||
isActive && isVisible && 'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700',
|
||||
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
className={buttonStyle}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
title={title}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
HoverButton.displayName = 'HoverButton';
|
||||
|
||||
const HoverButtons = ({
|
||||
index,
|
||||
isEditing,
|
||||
enterEdit,
|
||||
|
|
@ -34,20 +123,20 @@ export default function HoverButtons({
|
|||
handleContinue,
|
||||
latestMessage,
|
||||
isLast,
|
||||
}: THoverButtons) {
|
||||
handleFeedback,
|
||||
}: THoverButtons) => {
|
||||
const localize = useLocalize();
|
||||
const { endpoint: _endpoint, endpointType } = conversation ?? {};
|
||||
const endpoint = endpointType ?? _endpoint;
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const [TextToSpeech] = useRecoilState<boolean>(store.textToSpeech);
|
||||
|
||||
const {
|
||||
hideEditButton,
|
||||
regenerateEnabled,
|
||||
continueSupported,
|
||||
forkingSupported,
|
||||
isEditableEndpoint,
|
||||
} = useGenerationsByLatest({
|
||||
const endpoint = useMemo(() => {
|
||||
if (!conversation) {
|
||||
return '';
|
||||
}
|
||||
return conversation.endpointType ?? conversation.endpoint;
|
||||
}, [conversation]);
|
||||
|
||||
const generationCapabilities = useGenerationsByLatest({
|
||||
isEditing,
|
||||
isSubmitting,
|
||||
error: message.error,
|
||||
|
|
@ -58,38 +147,44 @@ export default function HoverButtons({
|
|||
isCreatedByUser: message.isCreatedByUser,
|
||||
latestMessageId: latestMessage?.messageId,
|
||||
});
|
||||
|
||||
const {
|
||||
hideEditButton,
|
||||
regenerateEnabled,
|
||||
continueSupported,
|
||||
forkingSupported,
|
||||
isEditableEndpoint,
|
||||
} = generationCapabilities;
|
||||
|
||||
if (!conversation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { isCreatedByUser, error } = message;
|
||||
|
||||
const renderRegenerate = () => {
|
||||
if (!regenerateEnabled) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
)}
|
||||
onClick={regenerate}
|
||||
type="button"
|
||||
title={localize('com_ui_regenerate')}
|
||||
>
|
||||
<RegenerateIcon
|
||||
className="hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
|
||||
size="19"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
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 mt-0 flex justify-center gap-1 self-end text-gray-500 lg:justify-start">
|
||||
{renderRegenerate()}
|
||||
<div className="visible flex justify-center self-end lg:justify-start">
|
||||
{regenerateEnabled && (
|
||||
<HoverButton
|
||||
onClick={regenerate}
|
||||
title={localize('com_ui_regenerate')}
|
||||
icon={<RegenerateIcon size="19" />}
|
||||
isLast={isLast}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -101,72 +196,92 @@ export default function HoverButtons({
|
|||
enterEdit();
|
||||
};
|
||||
|
||||
const handleCopy = () => copyToClipboard(setIsCopied);
|
||||
|
||||
return (
|
||||
<div className="visible mt-0 flex justify-center gap-1 self-end text-gray-500 lg:justify-start">
|
||||
<div className="group visible flex justify-center gap-0.5 self-end focus-within:outline-none lg:justify-start">
|
||||
{/* Text to Speech */}
|
||||
{TextToSpeech && (
|
||||
<MessageAudio
|
||||
index={index}
|
||||
messageId={message.messageId}
|
||||
content={message.content ?? message.text}
|
||||
content={extractMessageContent(message)}
|
||||
isLast={isLast}
|
||||
className={cn(
|
||||
'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 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-[.final-completion]:visible',
|
||||
renderButton={(props) => (
|
||||
<HoverButton
|
||||
onClick={props.onClick}
|
||||
title={props.title}
|
||||
icon={props.icon}
|
||||
isActive={props.isActive}
|
||||
isLast={isLast}
|
||||
className={props.className}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isEditableEndpoint && (
|
||||
<button
|
||||
id={`edit-${message.messageId}`}
|
||||
className={cn(
|
||||
'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 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-[.final-completion]:visible',
|
||||
isCreatedByUser ? '' : 'active',
|
||||
hideEditButton ? 'opacity-0' : '',
|
||||
isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
|
||||
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
)}
|
||||
onClick={onEdit}
|
||||
type="button"
|
||||
title={localize('com_ui_edit')}
|
||||
disabled={hideEditButton}
|
||||
>
|
||||
<EditIcon size="19" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className={cn(
|
||||
'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 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-[.final-completion]:visible',
|
||||
isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
)}
|
||||
onClick={() => copyToClipboard(setIsCopied)}
|
||||
type="button"
|
||||
|
||||
{/* Copy Button */}
|
||||
<HoverButton
|
||||
onClick={handleCopy}
|
||||
title={
|
||||
isCopied ? localize('com_ui_copied_to_clipboard') : localize('com_ui_copy_to_clipboard')
|
||||
}
|
||||
>
|
||||
{isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard size="19" />}
|
||||
</button>
|
||||
{renderRegenerate()}
|
||||
<Fork
|
||||
icon={isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard size="19" />}
|
||||
isLast={isLast}
|
||||
className={`ml-0 flex items-center gap-1.5 text-xs ${isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : ''}`}
|
||||
/>
|
||||
|
||||
{/* Edit Button */}
|
||||
{isEditableEndpoint && (
|
||||
<HoverButton
|
||||
onClick={onEdit}
|
||||
title={localize('com_ui_edit')}
|
||||
icon={<EditIcon size="19" />}
|
||||
isActive={isEditing}
|
||||
isVisible={!hideEditButton}
|
||||
isDisabled={hideEditButton}
|
||||
isLast={isLast}
|
||||
className={isCreatedByUser ? '' : 'active'}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Fork Button */}
|
||||
<Fork
|
||||
messageId={message.messageId}
|
||||
conversationId={conversation.conversationId}
|
||||
forkingSupported={forkingSupported}
|
||||
latestMessageId={latestMessage?.messageId}
|
||||
isLast={isLast}
|
||||
/>
|
||||
{continueSupported === true ? (
|
||||
<button
|
||||
className={cn(
|
||||
'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
|
||||
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
)}
|
||||
onClick={handleContinue}
|
||||
type="button"
|
||||
|
||||
{/* Feedback Buttons */}
|
||||
{!isCreatedByUser && (
|
||||
<Feedback handleFeedback={handleFeedback} feedback={message.feedback} isLast={isLast} />
|
||||
)}
|
||||
|
||||
{/* Regenerate Button */}
|
||||
{regenerateEnabled && (
|
||||
<HoverButton
|
||||
onClick={regenerate}
|
||||
title={localize('com_ui_regenerate')}
|
||||
icon={<RegenerateIcon size="19" />}
|
||||
isLast={isLast}
|
||||
className="active"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Continue Button */}
|
||||
{continueSupported && (
|
||||
<HoverButton
|
||||
onClick={(e) => e && handleContinue(e)}
|
||||
title={localize('com_ui_continue')}
|
||||
>
|
||||
<ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
|
||||
</button>
|
||||
) : null}
|
||||
icon={<ContinueIcon className="w-19 h-19 -rotate-180" />}
|
||||
isLast={isLast}
|
||||
className="active"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default memo(HoverButtons);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useCallback, useMemo, memo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useCallback, useMemo, memo } from 'react';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import { type TMessage } from 'librechat-data-provider';
|
||||
import type { TMessageProps, TMessageIcon } from '~/common';
|
||||
import MessageContent from '~/components/Chat/Messages/Content/MessageContent';
|
||||
import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
|
||||
|
|
@ -51,13 +51,13 @@ const MessageRender = memo(
|
|||
copyToClipboard,
|
||||
setLatestMessage,
|
||||
regenerateMessage,
|
||||
handleFeedback,
|
||||
} = useMessageActions({
|
||||
message: msg,
|
||||
currentEditId,
|
||||
isMultiMessage,
|
||||
setCurrentEditId,
|
||||
});
|
||||
|
||||
const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
|
||||
const fontSize = useRecoilValue(store.fontSize);
|
||||
|
||||
|
|
@ -206,6 +206,7 @@ const MessageRender = memo(
|
|||
copyToClipboard={copyToClipboard}
|
||||
handleContinue={handleContinue}
|
||||
latestMessage={latestMessage}
|
||||
handleFeedback={handleFeedback}
|
||||
isLast={isLast}
|
||||
/>
|
||||
</SubRow>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export function TemporaryChat() {
|
|||
render={
|
||||
<button
|
||||
onClick={handleBadgeToggle}
|
||||
aria-label={localize(temporaryBadge.label)}
|
||||
aria-label={localize(temporaryBadge.label)}
|
||||
className={cn(
|
||||
'inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light text-text-primary transition-all ease-in-out hover:bg-surface-tertiary',
|
||||
isTemporary
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue