Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support user-provided token to bingAI and chatgptBrowser

Browse source
This commit is contained in:
Wentao Lyu 2023-04-10 00:41:34 +08:00
parent a953fc9f2b
commit bbf2f8a6ca
22 changed files with 309 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Endpoints/EditPresetDialog.jsx
View file

@ -21,7 +21,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
const setPresets = useSetRecoilState(store.presets);
const availableEndpoints = useRecoilValue(store.availableEndpoints);
const endpointsFilter = useRecoilValue(store.endpointsFilter);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const setOption = param => newValue => {
let update = {};
@ -32,7 +32,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
...prevState,
...update
},
endpointsFilter
endpointsConfig
})
);
};
@ -44,7 +44,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
axios({
method: 'post',
url: '/api/presets',
data: cleanupPreset({ preset, endpointsFilter }),
data: cleanupPreset({ preset, endpointsConfig }),
withCredentials: true
}).then(res => {
setPresets(res?.data);
@ -54,7 +54,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
const exportPreset = () => {
const fileName = filenamify(preset?.title || 'preset');
exportFromJSON({
data: cleanupPreset({ preset, endpointsFilter }),
data: cleanupPreset({ preset, endpointsConfig }),
fileName,
exportType: exportFromJSON.types.json
});

4
client/src/components/Endpoints/EndpointOptionsDialog.jsx
View file

@ -16,7 +16,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
const [preset, setPreset] = useState(_preset);
const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
const endpointsFilter = useRecoilValue(store.endpointsFilter);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const setOption = param => newValue => {
let update = {};
@ -33,7 +33,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
const exportPreset = () => {
exportFromJSON({
data: cleanupPreset({ preset, endpointsFilter }),
data: cleanupPreset({ preset, endpointsConfig }),
fileName: `${preset?.title}.json`,
exportType: exportFromJSON.types.json
});

6
client/src/components/Endpoints/SaveAsPresetDialog.jsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import DialogTemplate from '../ui/DialogTemplate';
import { Dialog } from '../ui/Dialog.tsx';
@ -11,7 +11,7 @@ import store from '~/store';
const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
const [title, setTitle] = useState(preset?.title || 'My Preset');
const endpointsFilter = useRecoilValue(store.endpointsFilter);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const createPresetMutation = useCreatePresetMutation();
const defaultTextProps =
@ -23,7 +23,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
...preset,
title
},
endpointsFilter
endpointsConfig
});
createPresetMutation.mutate(_preset);
};

48
client/src/components/Input/NewConversationMenu/EndpointItem.jsx
View file

@ -1,8 +1,16 @@
import React from 'react';
import React, { useState } from 'react';
import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
import { Settings } from 'lucide-react';
import getIcon from '~/utils/getIcon';
import { useRecoilValue } from 'recoil';
import SetTokenDialog from '../SetTokenDialog';
import store from '../../../store';
export default function ModelItem({ endpoint, value, onSelect }) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const icon = getIcon({
size: 20,
endpoint,
@ -10,15 +18,37 @@ export default function ModelItem({ endpoint, value, onSelect }) {
className: 'mr-2'
});
const isuserProvide = endpointsConfig?.[endpoint]?.userProvide;
// regular model
return (
<DropdownMenuRadioItem
value={value}
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
{icon}
{endpoint}
{!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
</DropdownMenuRadioItem>
<>
<DropdownMenuRadioItem
value={value}
className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
{icon}
{endpoint}
{!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
<div className="flex w-4 flex-1" />
{isuserProvide ? (
<button
className="invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200"
onClick={e => {
e.preventDefault();
setSetTokenDialogOpen(true);
}}
>
<Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
Config Token
</button>
) : null}
</DropdownMenuRadioItem>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
</>
);
}

10
client/src/components/Input/NewConversationMenu/FileUpload.jsx
View file

@ -7,7 +7,7 @@ import store from '~/store';
const FileUpload = ({ onFileSelected }) => {
// const setPresets = useSetRecoilState(store.presets);
const endpointsFilter = useRecoilValue(store.endpointsFilter);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const handleFileChange = event => {
const file = event.target.files[0];
@ -16,7 +16,7 @@ const FileUpload = ({ onFileSelected }) => {
const reader = new FileReader();
reader.onload = e => {
const jsonData = JSON.parse(e.target.result);
onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsFilter }), presetId: null });
onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null });
};
reader.readAsText(file);
};
@ -24,10 +24,10 @@ const FileUpload = ({ onFileSelected }) => {
return (
<label
htmlFor="file-upload"
className=" mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
className=" mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
>
<FileUp className="flex w-[22px] items-center stroke-1" />
<span className="ml-1 flex text-xs ">Import</span>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs ">Import</span>
<input
id="file-upload"
value=""

36
client/src/components/Input/NewConversationMenu/index.jsx
View file

@ -1,8 +1,9 @@
import { useState, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import { useRecoilValue, useRecoilState } from 'recoil';
import EditPresetDialog from '../../Endpoints/EditPresetDialog';
import EndpointItems from './EndpointItems';
import PresetItems from './PresetItems';
import { Trash2 } from 'lucide-react';
import FileUpload from './FileUpload';
import getIcon from '~/utils/getIcon';
import { useDeletePresetMutation, useCreatePresetMutation } from '~/data-provider';
@ -36,14 +37,17 @@ export default function NewConversationMenu() {
const createPresetMutation = useCreatePresetMutation();
const importPreset = jsonData => {
createPresetMutation.mutate({...jsonData}, {
onSuccess: (data) => {
setPresets(data);
},
onError: (error) => {
console.error('Error uploading the preset:', error);
createPresetMutation.mutate(
{ ...jsonData },
{
onSuccess: data => {
setPresets(data);
},
onError: error => {
console.error('Error uploading the preset:', error);
}
}
})
);
};
// update the default model when availableModels changes
@ -85,11 +89,11 @@ export default function NewConversationMenu() {
};
const clearAllPresets = () => {
deletePresetsMutation.mutate({arg: {}});
deletePresetsMutation.mutate({ arg: {} });
};
const onDeletePreset = preset => {
deletePresetsMutation.mutate({arg: preset});
deletePresetsMutation.mutate({ arg: preset });
};
const icon = getIcon({
@ -146,12 +150,18 @@ export default function NewConversationMenu() {
<FileUpload onFileSelected={importPreset} />
<Dialog>
<DialogTrigger asChild>
<Button
<label
htmlFor="file-upload"
className=" mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
>
{/* <Button
type="button"
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
>
> */}
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
Clear All
</Button>
{/* </Button> */}
</label>
</DialogTrigger>
<DialogTemplate
title="Clear presets"

102
client/src/components/Input/SetTokenDialog/index.jsx Normal file
View file

@ -0,0 +1,102 @@
import React, { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import DialogTemplate from '../../ui/DialogTemplate';
import { Dialog } from '../../ui/Dialog.tsx';
import { Input } from '../../ui/Input.tsx';
import { Label } from '../../ui/Label.tsx';
import { cn } from '~/utils/';
import cleanupPreset from '~/utils/cleanupPreset';
import { useCreatePresetMutation } from '~/data-provider';
import store from '~/store';
const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
const [token, setToken] = useState('');
const { getToken, saveToken } = store.useToken(endpoint);
const defaultTextProps =
'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
const submit = () => {
saveToken(token);
onOpenChange(false);
};
useEffect(() => {
setToken(getToken() ?? '');
}, [open]);
const helpText = {
bingAI: (
<small className="break-all text-gray-600">
'The Bing Access Token is the "_U" cookie from bing.com. Use dev tools or an extension while logged
into the site to view it.'
</small>
),
chatGPTBrowser: (
<small className="break-all text-gray-600">
To get your Access token For ChatGPT 'Free Version', login to{' '}
<a
target="_blank"
href="https://chat.openai.com"
rel="noreferrer"
className="text-blue-600 underline"
>
https://chat.openai.com
</a>
, then visit{' '}
<a
target="_blank"
href="https://chat.openai.com/api/auth/session"
rel="noreferrer"
className="text-blue-600 underline"
>
https://chat.openai.com/api/auth/session
</a>
. Copy access token.
</small>
)
};
return (
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<DialogTemplate
title={`Set Token of ${endpoint}`}
main={
<div className="grid w-full items-center gap-2">
<Label
htmlFor="chatGptLabel"
className="text-left text-sm font-medium"
>
Token Name
<br />
</Label>
<Input
id="chatGptLabel"
value={token || ''}
onChange={e => setToken(e.target.value || '')}
placeholder="Set the token."
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
)}
/>
<small className="text-red-600">
Your token will be send to the server, but we won't save it.
</small>
{helpText?.[endpoint]}
</div>
}
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: 'Submit'
}}
/>
</Dialog>
);
};
export default SetTokenDialog;

45
client/src/components/Input/SubmitButton.jsx
View file

@ -1,12 +1,31 @@
import React from 'react';
import React, { useState } from 'react';
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
import { Settings } from 'lucide-react';
import SetTokenDialog from './SetTokenDialog';
import store from '../../store';
export default function SubmitButton({
endpoint,
submitMessage,
handleStopGenerating,
disabled,
isSubmitting,
endpointsConfig
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const { getToken } = store.useToken(endpoint);
const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
export default function SubmitButton({ submitMessage, handleStopGenerating, disabled, isSubmitting }) {
const clickHandler = e => {
e.preventDefault();
submitMessage();
};
const setToken = () => {
setSetTokenDialogOpen(true);
};
if (isSubmitting)
return (
<button
@ -42,7 +61,27 @@ export default function SubmitButton({ submitMessage, handleStopGenerating, disa
// </div>
// </button>
// );
else
else if (!isTokenProvided) {
return (
<>
<button
onClick={setToken}
type="button"
className="group absolute bottom-0 right-0 flex h-[100%] w-auto items-center justify-center bg-transparent p-1 text-gray-500"
>
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] align-middle text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<Settings className="mr-1 inline-block w-[18px]" />
Set Token First
</div>
</button>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
</>
);
} else
return (
<button
onClick={clickHandler}

5
client/src/components/Input/index.jsx
View file

@ -22,6 +22,7 @@ export default function TextChat({ isSearchView = false }) {
const [text, setText] = useRecoilState(store.text);
// const [text, setText] = useState('');
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const isSubmitting = useRecoilValue(store.isSubmitting);
// TODO: do we need this?
@ -62,7 +63,7 @@ export default function TextChat({ isSearchView = false }) {
setText('');
};
const handleStopGenerating = (e) => {
const handleStopGenerating = e => {
e.preventDefault();
stopGenerating();
};
@ -169,6 +170,8 @@ export default function TextChat({ isSearchView = false }) {
handleStopGenerating={handleStopGenerating}
disabled={disabled || isNotAppendable}
isSubmitting={isSubmitting}
endpointsConfig={endpointsConfig}
endpoint={conversation?.endpoint}
/>
{latestMessage && conversation?.jailbreak && conversation.endpoint === 'bingAI' ? (
<AdjustToneButton onClick={handleBingToneSetting} />

8
client/src/components/Nav/ExportConversation/ExportModel.jsx
View file

@ -27,7 +27,7 @@ export default function ExportModel({ open, onOpenChange }) {
const conversation = useRecoilValue(store.conversation) || {};
const messagesTree = useRecoilValue(store.messagesTree) || [];
const endpointsFilter = useRecoilValue(store.endpointsFilter);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const getSiblingIdx = useRecoilCallback(
({ snapshot }) =>
@ -164,7 +164,7 @@ export default function ExportModel({ open, onOpenChange }) {
if (includeOptions) {
data += `\n## Options\n`;
const options = cleanupPreset({ preset: conversation, endpointsFilter });
const options = cleanupPreset({ preset: conversation, endpointsConfig });
for (const key of Object.keys(options)) {
data += `- ${key}: ${options[key]}\n`;
@ -203,7 +203,7 @@ export default function ExportModel({ open, onOpenChange }) {
if (includeOptions) {
data += `\nOptions\n########################\n`;
const options = cleanupPreset({ preset: conversation, endpointsFilter });
const options = cleanupPreset({ preset: conversation, endpointsConfig });
for (const key of Object.keys(options)) {
data += `${key}: ${options[key]}\n`;
@ -241,7 +241,7 @@ export default function ExportModel({ open, onOpenChange }) {
recursive: recursive
};
if (includeOptions) data.options = cleanupPreset({ preset: conversation, endpointsFilter });
if (includeOptions) data.options = cleanupPreset({ preset: conversation, endpointsConfig });
const messages = await buildMessageTree({
messageId: conversation?.conversationId,