mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-23 10:54:11 +01:00
feat: Edit AI Messages, Edit Messages in Place (#825)
* refactor: replace lodash import with specific function import fix(api): esm imports to cjs * refactor(Messages.tsx): convert to TS, out-source scrollToDiv logic to a custom hook fix(ScreenshotContext.tsx): change Ref to RefObject in ScreenshotContextType feat(useScrollToRef.ts): add useScrollToRef hook for scrolling to a ref with throttle fix(Chat.tsx): update import path for Messages component fix(Search.tsx): update import path for Messages component * chore(types.ts): add TAskProps and TOptions types refactor(useMessageHandler.ts): use TAskFunction type for ask function signature * refactor(Message/Content): convert to TS, move Plugin component to Content dir * feat(MessageContent.tsx): add MessageContent component for displaying and editing message content feat(index.ts): export MessageContent component from Messages/Content directory * wip(Message.jsx): conversion and use of new component in progress * refactor: convert Message.jsx to TS and fix typing/imports based on changes * refactor: add typed props and refactor MultiMessage to TS, fix typing issues resulting from the conversion * edit message in progress * feat: complete edit AI message logic, refactor continue logic * feat(middleware): add validateMessageReq middleware feat(routes): add validation for message requests using validateMessageReq middleware feat(routes): add create, read, update, and delete routes for messages * feat: complete frontend logic for editing messages in place feat(messages.js): update route for updating a specific message - Change the route for updating a message to include the messageId in the URL - Update the request handler to use the messageId from the request parameters and the text from the request body - Call the updateMessage function with the updated parameters feat(MessageContent.tsx): add functionality to update a message - Import the useUpdateMessageMutation hook from the data provider - Destructure the conversationId, parentMessageId, and messageId from the message object - Create a mutation function using the useUpdateMessageMutation hook - Implement the updateMessage function to call the mutation function with the updated message parameters - Update the messages state to reflect the updated message text feat(api-endpoints.ts): update messages endpoint to include messageId - Update the messages endpoint to include the messageId as an optional parameter feat(data-service.ts): add updateMessage function - Implement the updateMessage function to make a PUT request to * fix(messages.js): make updateMessage function asynchronous and await its execution * style(EditIcon): make icon active for AI message * feat(gptPlugins/anthropic): add edit support * fix(validateMessageReq.js): handle case when conversationId is 'new' and return empty array feat(Message.tsx): pass message prop to SiblingSwitch component refactor(SiblingSwitch.tsx): convert to TS * fix(useMessageHandler.ts): remove message from currentMessages if isContinued is true feat(useMessageHandler.ts): add support for submission messages in setMessages fix(useServerStream.ts): remove unnecessary conditional in setMessages fix(useServerStream.ts): remove isContinued variable from submission * fix(continue): switch to continued message generation when continuing an earlier branch in conversation * fix(abortMiddleware.js): fix condition to check partialText length chore(abortMiddleware.js): add error logging when abortMessage fails * refactor(MessageHeader.tsx): convert to TS fix(Plugin.tsx): add default value for className prop in Plugin component * refactor(MultiMessage.tsx): remove commented out code docs(MultiMessage.tsx): update comment to clarify when siblingIdx is reset * fix(GenerationButtons): optimistic state for continue button * fix(MessageContent.tsx): add data-testid attribute to message text editor fix(messages.spec.ts): update waitForServerStream function to include edit endpoint check feat(messages.spec.ts): add test case for editing messages * fix(HoverButtons & Message & useGenerations): Refactor edit functionality and related conditions - Update enterEdit function signature and prop - Create and utilize hideEditButton variable - Enhance conditions for edit button visibility and active state - Update button event handlers - Introduce isEditableEndpoint in useGenerations and refine continueSupported condition. * fix(useGenerations.ts): fix condition for hideEditButton to include error and searchResult chore(data-provider): bump version to 0.1.6 fix(types.ts): add status property to TError type * chore: bump @dqbd/tiktoken to 1.0.7 * fix(abortMiddleware.js): add required isCreatedByUser property to the error response object * refactor(Message.tsx): remove unnecessary props from SiblingSwitch component, as setLatestMessage is firing on every switch already refactor(SiblingSwitch.tsx): remove unused imports and code * chore(BaseClient.js): move console.debug statements back inside if block
This commit is contained in:
Danny Avila
GitHub
parent
db77163f5d
commit
7dc27b10f1
45 changed files with 908 additions and 459 deletions
|
|
@ -1,146 +0,0 @@
|
|||
import React, { useState, useCallback, memo, ReactNode } from 'react';
|
||||
import { Spinner } from '~/components';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import CodeBlock from './Content/CodeBlock.jsx';
|
||||
import { Disclosure } from '@headlessui/react';
|
||||
import { ChevronDownIcon, LucideProps } from 'lucide-react';
|
||||
import { cn } from '~/utils/';
|
||||
import store from '~/store';
|
||||
|
||||
interface Input {
|
||||
inputStr: string;
|
||||
}
|
||||
|
||||
interface PluginProps {
|
||||
plugin: {
|
||||
plugin: string;
|
||||
input: string;
|
||||
thought: string;
|
||||
loading?: boolean;
|
||||
outputs?: string;
|
||||
latest?: string;
|
||||
inputs?: Input[];
|
||||
};
|
||||
}
|
||||
|
||||
type PluginsMap = {
|
||||
[pluginKey: string]: string;
|
||||
};
|
||||
|
||||
type PluginIconProps = LucideProps & {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function formatInputs(inputs: Input[]) {
|
||||
let output = '';
|
||||
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
output += `${inputs[i].inputStr}`;
|
||||
|
||||
if (inputs.length > 1 && i !== inputs.length - 1) {
|
||||
output += ',\n';
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
const Plugin: React.FC<PluginProps> = ({ plugin }) => {
|
||||
const [loading, setLoading] = useState(plugin.loading);
|
||||
const finished = plugin.outputs && plugin.outputs.length > 0;
|
||||
const plugins: PluginsMap = useRecoilValue(store.plugins);
|
||||
|
||||
const getPluginName = useCallback(
|
||||
(pluginKey: string) => {
|
||||
if (!pluginKey) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (pluginKey === 'n/a' || pluginKey === 'self reflection') {
|
||||
return pluginKey;
|
||||
}
|
||||
return plugins[pluginKey] ?? 'self reflection';
|
||||
},
|
||||
[plugins],
|
||||
);
|
||||
|
||||
if (!plugin || !plugin.latest) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const latestPlugin = getPluginName(plugin.latest);
|
||||
|
||||
if (!latestPlugin || (latestPlugin && latestPlugin === 'n/a')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (finished && loading) {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const generateStatus = (): ReactNode => {
|
||||
if (!loading && latestPlugin === 'self reflection') {
|
||||
return 'Finished';
|
||||
} else if (latestPlugin === 'self reflection') {
|
||||
return 'I\'m thinking...';
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{loading ? 'Using' : 'Used'} <b>{latestPlugin}</b>
|
||||
{loading ? '...' : ''}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start">
|
||||
<Disclosure>
|
||||
{({ open }) => {
|
||||
const iconProps: PluginIconProps = {
|
||||
className: cn(open ? 'rotate-180 transform' : '', 'h-4 w-4'),
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
loading ? 'bg-green-100' : 'bg-[#ECECF1]',
|
||||
'flex items-center rounded p-3 text-sm text-gray-900',
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div>{generateStatus()}</div>
|
||||
</div>
|
||||
</div>
|
||||
{loading && <Spinner className="ml-1" />}
|
||||
<Disclosure.Button className="ml-12 flex items-center gap-2">
|
||||
<ChevronDownIcon {...iconProps} />
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel className="my-3 flex max-w-full flex-col gap-3">
|
||||
<CodeBlock
|
||||
lang={latestPlugin?.toUpperCase() || 'INPUTS'}
|
||||
codeChildren={formatInputs(plugin.inputs ?? [])}
|
||||
plugin={true}
|
||||
classProp="max-h-[450px]"
|
||||
/>
|
||||
{finished && (
|
||||
<CodeBlock
|
||||
lang="OUTPUTS"
|
||||
codeChildren={plugin.outputs ?? ''}
|
||||
plugin={true}
|
||||
classProp="max-h-[450px]"
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Disclosure>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Plugin);
|
||||
Loading…
Add table
Add a link
Reference in a new issue