mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-26 04:06:12 +01:00
refactor: Settings/Presets UI Restructure, convert many files to TS (#740)
* progress on settings refactor * fix(helpers.js): replace fs.rmdirSync with fs.rm to delete node_modules directory recursively fix(packages.js): delete package-lock.json if it exists before running the script * feat(CrossIcon.tsx): add CrossIcon component * wip: refactor Options for modularity into higher order components, OptionsBar > ModelSelect/Settings * refactor: import more from utils/index, including cardStyle used by model select/settings * refactor(AnthropicOptions): refactor to new format, OpenAI: reduce format to name of endpoint * refactor(AnthropicSettings): refactor to new format, match defaults to API docs * fix: google and anthropic defaults * refactor(conversation/submission atoms): add typing, remove unused code * chore(types.ts): add missing type definitions for TMessages, TMessagesAtom, TConversationAtom, and ModelSelectProps feat(types.ts): make endpoint property nullable in TSubmission, TEndpointOption, TConversation, and TPreset types * refactor(ChatGPT): refactor to new format, add omit settings logic * refactor(EndpointSettings/BingAI): new dir structure and format BingAI options/settings to new * fix: update useUpdateTokenCountMutation to accept an object with a 'text' property instead of a string * fix(endpoints): ensure expected behaviors for preset dialogs * chore(index.ts): add defaultTextProps to utils/index.ts for use in settings components * chore(index.ts): add optionText to utils/index.ts for use in settings components * wip: refactor google settings * wip: progress with Google refactor, needs AdditionalButtons handling and global state setters * refactor(OptionsBar.tsx): The setOption function has been refactored to use the useSetOptions custom hook for setting conversation options. * chore(Anthropic.tsx, BingAI.tsx, Google.tsx, OpenAI.tsx): adjust height of container div in Settings component; chore(Examples.tsx): adjust height in Examples component * refactor(Google): complete google refactor feat(client): add new component PopoverButtons for displaying popover buttons in EndpointPopover feat(data-provider): add types for PopoverButton and EndpointOptionsPopoverProps * fix(OptionsBar.tsx): add useEffect hook to handle opacity class based on messagesTree and advancedMode fix(style.css): rename class from 'openAIOptions-simple-container' to 'options-bar' and update references * refactor(Plugins/OptionsBar): complete refactor of Plugins Select options, consolidate logic from TextChat to OptionsBar * fix(Plugins.tsx): filter lastSelectedTools to remove any tools that are not in the current tools list fix(useSetOptions.ts): remove unnecessary empty line * feat(useSetOptions.ts): add setAgentOption function to update agentOptions in conversation state feat(types.ts): add setAgentOption function to UseSetOptions type * refactor(Settings/Plugins): refactor to new format, refactor(OptionHover): use same component for all endpoints * refactor(OptionHover.tsx): refactor types object to use nested objects for openAI and gptPlugins feat(OptionHover.tsx): add openAI object with specific properties for openAI configuration * refactor(AgentSettings): new format, feat(types.ts): add TAgentOptions type for defining agent options in a conversation * feat(PopoverButtons.tsx): add support for GPT plugin settings button feat(Plugins.tsx): create PluginsView component for displaying plugin settings feat(optionSettings.ts): add showAgentSettings atom for controlling agent settings visibility * feat(client): add support for PluginsSettings in Input/Settings component fix(client): change import path for PluginsSettings in Input/Settings component * refactor(Settings/Plugins): complete refactor, store: refactor to TS, refactor: import defaultTextPropsLabel from utils * feat(EndpointSettings, AgentSettings, Anthropic, Google, types.ts): Add support for Recoil state management and useRecoilValue hook; Pass models from endpointsConfig to various components; Add TModels type and update ModelSelectProps type. fix(AgentSettings, Anthropic, Google, GoogleView, Plugins, OpenAI, Settings.tsx): Change import statements for ModelSelectProps from librechat-data-provider; Add models as a parameter to various components; Add models prop to PluginsView, Settings, and other components. * refactor(EditPresetDialog.jsx): update import statements for Examples and AgentSettings components feat(Settings/index.ts): add export statements for Examples and AgentSettings components * chore(package.json): update eslint-plugin-import to version 2.28.0 * fix(eslint): dependency cycle rule is now working * fix: dependency cycle errors and type errors * refactor(EditPresetDialog.jsx): update import path for DialogTemplate component refactor(NewConversationMenu/index.jsx): update import path for DialogTemplate component refactor(ExportModel.jsx): update import path for DialogTemplate component * refactor: rename NewConversationMenu to EndpointMenu * style: mobile and desktop optimizations * chore: eslint changes * chore(eslintrc.js): update eslint configuration to use 'prettier' plugin chore(postcss.config.cjs): update postcss configuration to use single quotes for require statements fix(helpers.js): fix fs.rmSync function call to delete node_modules directory recursively feat(update.js): add support for skipping git commands with '-g' flag * chore(ModelSelect.tsx): add support for azureOpenAI option component chore(Settings.tsx): add support for azureOpenAI option component chore(package.json): add rebuild:package-lock and update:branch scripts * fix(OptionHover.tsx): fix accessing nested properties in types object feat(OptionHover.tsx): add check for existence of text before rendering HoverCardContent * chore(style.css): update transition duration for options-bar from 0.3s to 0.25s * fix(ScrollToBottom.jsx): fix z-index value for scroll button * style: improve dialogs * fix(Nav.jsx): adjust width and max-width of nav component * chore(Nav.jsx): update max-width class for nav component in different screen sizes chore(Dialog.tsx): update class for DialogFooter component to use flex-row layout * fix(client): fix node_module resolution with path mapping * fix(AdjustToneButton.jsx): add z-index to adjust tone button for proper layering fix(TextChat.jsx): change onClick function to use arrow function to avoid immediate execution fix(mobile.css): update z-index for nav and nav-mask for proper layering chore(package.json): rename update:branch script to reinstall for clarity and consistency * fix(OptionsBar/Settings): add null checks for conversation in BingAI.tsx, ChatGPT.tsx, Plugins.tsx, Settings.tsx * style(TextChat/OptionsBar): match official site styles, setup regen/continue/stop buttons div * chore: Import and apply removeFocusOutlines utility across various components, and rename removeButtonOutline to removeFocusOutlines chore(Settings): Remove unused import and conditionally return null if conversation is falsy * feat(hooks): add useLocalize hook The useLocalize hook is added to the hooks/index.ts file. This hook allows for localization of phrases using the localize function from the ~/localization/Translation module. The hook uses the lang value from the store to determine the current language and returns a function that takes a phraseKey and optional values array as arguments and returns the localized phrase. * refactor(OptionHover.tsx): Update text keys for OptionHover component, use new hook: useLocalize * refactor(useDocumentTitle.ts): refactor to TS * fix(typescript): type issues and update typescript linting deps * refactor: Update ThemeContext and useOnClickOutside to TypeScript chore(useDidMountEffect.js): Remove useDidMountEffect hook * feat: GenerationButtons for stop/continue/regen, remove AdjustToneButton in favor of alternate advanced mode/Settings in OptionsBar * fix(EndpointOptionsPopover.tsx): change switchToSimpleMode function name to closePopover fix(GenerationButtons.tsx): change advancedMode prop name to showPopover fix(OptionsBar.tsx): change advancedMode state name to showPopover feat(OptionsBar.tsx): add logic to show/hide popover based on showPopover state fix(types.ts): change switchToSimpleMode function name to closePopover * chore: remove template button * chore(GenerationButtons.tsx): adjust positioning of the div element chore(Plugins.tsx): adjust width of the MultiSelectDropDown component chore(OptionsBar.tsx): adjust padding of the button element * refactor(EditPresetDialog): use new modular higher order components * chore(newoptionsbar.html): delete unused file newoptionsbar.html * refactor(EditPresetDialog): convert to TS * chore(babel.config.cjs): update babel configuration, linting * chore(EditPresetDialog.tsx): update className for DialogTemplate to include pb-0 chore(EndpointOptionsDialog.jsx): update className for DialogTemplate to include pb-0 chore(PopoverButtons.tsx): add buttonClass prop to PopoverButtons component chore(DialogTemplate.tsx): update className for the footer div to include h-auto chore(Dropdown.jsx): remove id prop from Dropdown component chore(mobile.css): update transition duration for .nav class from 0.2s to 0.15s * refactor(EditPresetDialog.tsx): simplify localization usage with hook * chore(EditPresetDialog.tsx): update containerClassName to include z-index value * fix(endpoints.ts): change type of endpointsConfig atom to TEndpointsConfig refactor(cleanupPreset.ts): convert to TS fix(index.ts): export cleanupPreset utility function fix(types.ts): add missing properties to TPreset type * refactor(EndpointOptionsDialog): convert to TS * fix(EditPresetDialog.tsx): - import cleanupPreset from index - add null check before submitting preset - add null check before exporting preset refactor(SaveAsPresetDialog.tsx): convert to TS fix(usePresetOptions.ts): import cleanupPreset from index fix(types.ts): - make title prop optional in EditPresetProps - change preset prop in CleanupPreset to be partial * chore: reorganize imports in App, EndpointMenu, Messages, and ExportModel components feat(ScreenshotContext.jsx): add ScreenshotContext to hooks/index chore(index.ts): export ThemeContext, ScreenshotContext, ApiErrorBoundaryContext hooks, cleanupPreset, and getIcon functions from utils * wip: add headerClassName for dialog template * chore(EndpointOptionsDialog.tsx): remove unused headerClassName prop chore(EndpointOptionsDialog.tsx): adjust height of main container in mobile and desktop view * fix(react-query-service.ts): change return type of useGetEndpointsQuery to QueryObserverResult<t.TEndpointsConfig> * refactor: imports from index and refactor to TS * refactor: refactor all svg components to TS * refactor: refactor all UI components to TS, remove unused component * fix(SelectDropDown.tsx): remove file extension from import statement for CheckMark component * fix: SaveAsPresetDialog typing issue * fix(OptionsBar): close popover when an endpoint with no settings is selected * chore(ChatGPT.tsx): update width of model select dropdown to 60px refactor(types.ts): decouple ModelSelectProps from SettingsProps * fix(popover Settings): space taken from the options menu for each endpoint * fix:'Set token first' element alignment, add padding to endpointmenu icon in mobile * style: match official site header * refactor(EndpointOptionsDialog): make functionality explicitly saving current convos as presets * fix(useLocalize.ts): change values parameter from an array to rest parameters * refactor(EndpointSettings): Utilize useLocalize hook for all endpoint settings * fix(Popover): correct spacing/center and remove focus outlines for close button * chore: employ use of cn (clsx) in Popover styles * chore(EditPresetDialog.tsx): update className to add padding bottom chore(EndpointOptionsDialog.tsx): update className to add padding bottom * style(EndpointMenu, TextChat): add better styling at diff. breakpoints * refactor(EndpointSettings): consolidate container style to higher order component * refactor(EditPresetDialog.tsx): pass custom style to Settings from here * style: setting dialogs improved in all views * style(EndpointMenu): improve UX for mobile * style(PresetDialog): increase height so scrollbar isn't triggered * chore(EditPresetDialog.tsx): update className to include xl height for DialogTemplate chore(InputNumber.tsx): update className to include max height for InputNumber component * fix: light mode styling * fix(OptionsBar/ScrollToBottom/Popover): quick fix to rework in future: hide scrollToBottom when Popover is open * style: remove bg-gradient around textarea in mobile view * chore(ThemeContext.tsx): refactor ThemeContext to use default context value, also fixes type issue * chore(EditPresetDialog.tsx): adjust grid layout in EditPresetDialog component * style(TextChat): make gradient more opaque/smoother * fix(TextChat.jsx): fix background gradient color based on theme and system preference * test(layout-test-utils.tsx): add mock implementation for window.matchMedia in test setup feat(layout-test-utils.tsx): add authConfig prop to AuthContextProvider in renderWithProvidersWrapper function chore(tsconfig.json): include test directory in tsconfig include section * chore(jest.config.cjs): update test file paths in jest configuration chore(Login.spec.tsx): update test file path in import statement chore(LoginForm.spec.tsx): update test file path in import statement chore(Registration.spec.tsx): update test file path in import statement chore(PluginAuthForm.spec.tsx): update test file path in import statement chore(PluginStoreDialog.spec.tsx): update test file path in import statement chore(layout-test-utils.tsx): move matchMedia mock to separate file chore(tsconfig.json): add path mapping for test files in client directory * test: add import for 'test/matchMedia.mock' in test files The changes in this commit add an import statement for 'test/matchMedia.mock' in multiple test files. This import is necessary for mocking the behavior of the matchMedia function during testing. * style(ClearConvosDialog): remove borders from button and modal, uniform button size * fix(AgentSettings.tsx): overlapping issue * fix(PresetDialogs): improve spacing of top row and dialog content * style(Settings): 2nd column will now dynamically adjust better across all screen sizes * style(ModelSelect): improve styling for mobile/desktop, add hover shadow feat(ModelSelect/Plugins): hide ModelSelect when screen is small * refactor(RowButton, buildTree): convert to TS * style(ModelSelect): add transition effect to shadows on hover
This commit is contained in:
Danny Avila
GitHub
parent
fb99e5a7da
commit
956aa6c674
203 changed files with 5062 additions and 4327 deletions
|
|
@ -1,15 +1,17 @@
|
|||
import { TMessage } from 'librechat-data-provider';
|
||||
|
||||
const even =
|
||||
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700 dark:hover:bg-gray-900 dark:hover:text-gray-200';
|
||||
const odd =
|
||||
'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000 hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
|
||||
|
||||
export default function buildTree(messages, groupAll = false) {
|
||||
export default function buildTree(messages: TMessage[] | null, groupAll = false) {
|
||||
if (messages === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let messageMap = {};
|
||||
let rootMessages = [];
|
||||
const messageMap: Record<string, TMessage & { children: TMessage[] }> = {};
|
||||
const rootMessages: TMessage[] = [];
|
||||
|
||||
if (groupAll) {
|
||||
return messages.map((m, idx) => ({ ...m, bg: idx % 2 === 0 ? even : odd }));
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
|
||||
import { CleanupPreset } from 'librechat-data-provider';
|
||||
|
||||
const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }: CleanupPreset) => {
|
||||
const { endpoint } = _preset;
|
||||
|
||||
let preset = {};
|
||||
let models = [];
|
||||
if (endpoint) {
|
||||
models = endpointsConfig[endpoint]?.availableModels || [];
|
||||
}
|
||||
if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
|
||||
preset = {
|
||||
endpoint,
|
||||
presetId: _preset?.presetId ?? null,
|
||||
model: _preset?.model ?? endpointsConfig[endpoint]?.availableModels?.[0] ?? 'gpt-3.5-turbo',
|
||||
model: _preset?.model ?? models[0] ?? 'gpt-3.5-turbo',
|
||||
chatGptLabel: _preset?.chatGptLabel ?? null,
|
||||
promptPrefix: _preset?.promptPrefix ?? null,
|
||||
temperature: _preset?.temperature ?? 1,
|
||||
|
|
@ -19,7 +25,7 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
|
|||
preset = {
|
||||
endpoint,
|
||||
presetId: _preset?.presetId ?? null,
|
||||
model: _preset?.model ?? endpointsConfig[endpoint]?.availableModels?.[0] ?? 'chat-bison',
|
||||
model: _preset?.model ?? models[0] ?? 'chat-bison',
|
||||
modelLabel: _preset?.modelLabel ?? null,
|
||||
examples: _preset?.examples ?? [{ input: { content: '' }, output: { content: '' } }],
|
||||
promptPrefix: _preset?.promptPrefix ?? null,
|
||||
|
|
@ -33,13 +39,13 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
|
|||
preset = {
|
||||
endpoint,
|
||||
presetId: _preset?.presetId ?? null,
|
||||
model: _preset?.model ?? endpointsConfig[endpoint]?.availableModels?.[0] ?? 'claude-1',
|
||||
model: _preset?.model ?? models[0] ?? 'claude-1',
|
||||
modelLabel: _preset?.modelLabel ?? null,
|
||||
promptPrefix: _preset?.promptPrefix ?? null,
|
||||
temperature: _preset?.temperature ?? 0.7,
|
||||
temperature: _preset?.temperature ?? 1,
|
||||
maxOutputTokens: _preset?.maxOutputTokens ?? 1024,
|
||||
topP: _preset?.topP ?? 0.7,
|
||||
topK: _preset?.topK ?? 40,
|
||||
topK: _preset?.topK ?? 5,
|
||||
title: _preset?.title ?? 'New Preset',
|
||||
};
|
||||
} else if (endpoint === 'bingAI') {
|
||||
|
|
@ -56,10 +62,7 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
|
|||
preset = {
|
||||
endpoint,
|
||||
presetId: _preset?.presetId ?? null,
|
||||
model:
|
||||
_preset?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'text-davinci-002-render-sha',
|
||||
model: _preset?.model ?? models[0] ?? 'text-davinci-002-render-sha',
|
||||
title: _preset?.title ?? 'New Preset',
|
||||
};
|
||||
} else if (endpoint === 'gptPlugins') {
|
||||
|
|
@ -76,7 +79,7 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
|
|||
endpoint,
|
||||
presetId: _preset?.presetId ?? null,
|
||||
tools: _preset?.tools ?? [],
|
||||
model: _preset?.model ?? endpointsConfig[endpoint]?.availableModels?.[0] ?? 'gpt-3.5-turbo',
|
||||
model: _preset?.model ?? models[0] ?? 'gpt-3.5-turbo',
|
||||
chatGptLabel: _preset?.chatGptLabel ?? null,
|
||||
promptPrefix: _preset?.promptPrefix ?? null,
|
||||
temperature: _preset?.temperature ?? 0.8,
|
||||
|
|
@ -68,10 +68,10 @@ const buildDefaultConversation = ({
|
|||
'claude-1',
|
||||
modelLabel: lastConversationSetup?.modelLabel ?? null,
|
||||
promptPrefix: lastConversationSetup?.promptPrefix ?? null,
|
||||
temperature: lastConversationSetup?.temperature ?? 0.7,
|
||||
temperature: lastConversationSetup?.temperature ?? 1,
|
||||
maxOutputTokens: lastConversationSetup?.maxOutputTokens ?? 1024,
|
||||
topP: lastConversationSetup?.topP ?? 0.7,
|
||||
topK: lastConversationSetup?.topK ?? 40,
|
||||
topK: lastConversationSetup?.topK ?? 5,
|
||||
};
|
||||
} else if (endpoint === 'chatGPTBrowser') {
|
||||
conversation = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const isJson = (str) => {
|
||||
const isJson = (str: string) => {
|
||||
try {
|
||||
JSON.parse(str);
|
||||
} catch (e) {
|
||||
|
|
@ -7,12 +7,12 @@ const isJson = (str) => {
|
|||
return true;
|
||||
};
|
||||
|
||||
const getError = (text) => {
|
||||
const getError = (text: string) => {
|
||||
const errorMessage = text.length > 512 ? text.slice(0, 512) + '...' : text;
|
||||
const match = text.match(/\{[^{}]*\}/);
|
||||
let json = match ? match[0] : '';
|
||||
if (isJson(json)) {
|
||||
json = JSON.parse(json);
|
||||
const jsonString = match ? match[0] : '';
|
||||
if (isJson(jsonString)) {
|
||||
const json = JSON.parse(jsonString);
|
||||
if (json.code === 'invalid_api_key') {
|
||||
return 'Invalid API key. Please check your API key and try again. You can do this by clicking on the model logo in the left corner of the textbox and selecting "Set Token" for the current selected endpoint. Thank you for your understanding.';
|
||||
} else if (json.type === 'insufficient_quota') {
|
||||
|
|
|
|||
|
|
@ -1,114 +0,0 @@
|
|||
import { Plugin, GPTIcon, AnthropicIcon } from '~/components/svg';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const getIcon = (props) => {
|
||||
const { size = 30, isCreatedByUser, button, model, message = true } = props;
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const { user } = useAuthContext();
|
||||
|
||||
if (isCreatedByUser) {
|
||||
return (
|
||||
<div
|
||||
title={user?.name || 'User'}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={'relative flex items-center justify-center' + props?.className}
|
||||
>
|
||||
<img
|
||||
className="rounded-sm"
|
||||
src={
|
||||
user?.avatar ||
|
||||
`https://api.dicebear.com/6.x/initials/svg?seed=${
|
||||
user?.name || 'User'
|
||||
}&fontFamily=Verdana&fontSize=36`
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (!isCreatedByUser) {
|
||||
const { endpoint, error } = props;
|
||||
|
||||
let icon, bg, name;
|
||||
if (endpoint === 'azureOpenAI') {
|
||||
const { chatGptLabel } = props;
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'linear-gradient(0.375turn, #61bde2, #4389d0)';
|
||||
name = chatGptLabel || 'ChatGPT';
|
||||
} else if (endpoint === 'openAI' || (endpoint === 'gptPlugins' && message)) {
|
||||
const { chatGptLabel } = props;
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg =
|
||||
model && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: chatGptLabel
|
||||
? `rgba(16, 163, 127, ${button ? 0.75 : 1})`
|
||||
: `rgba(16, 163, 127, ${button ? 0.75 : 1})`;
|
||||
name = chatGptLabel || 'ChatGPT';
|
||||
} else if (endpoint === 'gptPlugins' && !message) {
|
||||
icon = <Plugin size={size * 0.7} />;
|
||||
bg = `rgba(69, 89, 164, ${button ? 0.75 : 1})`;
|
||||
name = 'Plugins';
|
||||
} else if (endpoint === 'google') {
|
||||
const { modelLabel } = props;
|
||||
icon = <img src="/assets/google-palm.svg" alt="Palm Icon" />;
|
||||
name = modelLabel || 'PaLM2';
|
||||
} else if (endpoint === 'anthropic') {
|
||||
const { modelLabel } = props;
|
||||
icon = <AnthropicIcon size={size * 0.7} />;
|
||||
bg = '#d09a74';
|
||||
name = modelLabel || 'Claude';
|
||||
} else if (endpoint === 'bingAI') {
|
||||
const { jailbreak } = props;
|
||||
if (jailbreak) {
|
||||
icon = <img src="/assets/bingai-jb.png" alt="Bing Icon" />;
|
||||
name = 'Sydney';
|
||||
} else {
|
||||
icon = <img src="/assets/bingai.png" alt="Sydney Icon" />;
|
||||
name = 'BingAI';
|
||||
}
|
||||
} else if (endpoint === 'chatGPTBrowser') {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg =
|
||||
model && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
|
||||
name = 'ChatGPT';
|
||||
} else if (endpoint === null) {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'grey';
|
||||
name = 'N/A';
|
||||
} else {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'grey';
|
||||
name = 'UNKNOWN';
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
style={{
|
||||
background: bg || 'transparent',
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={cn(
|
||||
'relative flex items-center justify-center rounded-sm text-white ',
|
||||
props?.className ?? '',
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default getIcon;
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
const useMessageHandler = () => {
|
||||
const currentConversation = useRecoilValue(store.conversation) || {};
|
||||
const setSubmission = useSetRecoilState(store.submission);
|
||||
const isSubmitting = useRecoilValue(store.isSubmitting);
|
||||
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
||||
|
||||
const { getToken } = store.useToken(currentConversation?.endpoint);
|
||||
|
||||
const latestMessage = useRecoilValue(store.latestMessage);
|
||||
|
||||
const [messages, setMessages] = useRecoilState(store.messages);
|
||||
|
||||
const ask = (
|
||||
{ text, parentMessageId = null, conversationId = null, messageId = null },
|
||||
{ isRegenerate = false } = {},
|
||||
) => {
|
||||
if (!!isSubmitting || text === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
// determine the model to be used
|
||||
const { endpoint } = currentConversation;
|
||||
let endpointOption = {};
|
||||
let responseSender = '';
|
||||
if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
model:
|
||||
currentConversation?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'gpt-3.5-turbo',
|
||||
chatGptLabel: currentConversation?.chatGptLabel ?? null,
|
||||
promptPrefix: currentConversation?.promptPrefix ?? null,
|
||||
temperature: currentConversation?.temperature ?? 1,
|
||||
top_p: currentConversation?.top_p ?? 1,
|
||||
presence_penalty: currentConversation?.presence_penalty ?? 0,
|
||||
frequency_penalty: currentConversation?.frequency_penalty ?? 0,
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
};
|
||||
responseSender = endpointOption.chatGptLabel ?? 'ChatGPT';
|
||||
} else if (endpoint === 'google') {
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
model:
|
||||
currentConversation?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'chat-bison',
|
||||
modelLabel: currentConversation?.modelLabel ?? null,
|
||||
promptPrefix: currentConversation?.promptPrefix ?? null,
|
||||
examples: currentConversation?.examples ?? [
|
||||
{ input: { content: '' }, output: { content: '' } },
|
||||
],
|
||||
temperature: currentConversation?.temperature ?? 0.2,
|
||||
maxOutputTokens: currentConversation?.maxOutputTokens ?? 1024,
|
||||
topP: currentConversation?.topP ?? 0.95,
|
||||
topK: currentConversation?.topK ?? 40,
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
};
|
||||
responseSender = endpointOption.chatGptLabel ?? 'ChatGPT';
|
||||
} else if (endpoint === 'bingAI') {
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
jailbreak: currentConversation?.jailbreak ?? false,
|
||||
systemMessage: currentConversation?.systemMessage ?? null,
|
||||
context: currentConversation?.context ?? null,
|
||||
toneStyle: currentConversation?.toneStyle ?? 'creative',
|
||||
jailbreakConversationId: currentConversation?.jailbreakConversationId ?? null,
|
||||
conversationSignature: currentConversation?.conversationSignature ?? null,
|
||||
clientId: currentConversation?.clientId ?? null,
|
||||
invocationId: currentConversation?.invocationId ?? 1,
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
};
|
||||
responseSender = endpointOption.jailbreak ? 'Sydney' : 'BingAI';
|
||||
} else if (endpoint === 'anthropic') {
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
model:
|
||||
currentConversation?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'claude-1',
|
||||
modelLabel: currentConversation?.modelLabel ?? null,
|
||||
promptPrefix: currentConversation?.promptPrefix ?? null,
|
||||
temperature: currentConversation?.temperature ?? 0.7,
|
||||
maxOutputTokens: currentConversation?.maxOutputTokens ?? 1024,
|
||||
topP: currentConversation?.topP ?? 0.7,
|
||||
topK: currentConversation?.topK ?? 40,
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
};
|
||||
responseSender = 'Anthropic';
|
||||
} else if (endpoint === 'chatGPTBrowser') {
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
model:
|
||||
currentConversation?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'text-davinci-002-render-sha',
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
};
|
||||
responseSender = 'ChatGPT';
|
||||
} else if (endpoint === 'gptPlugins') {
|
||||
const agentOptions = currentConversation?.agentOptions ?? {
|
||||
agent: 'functions',
|
||||
skipCompletion: true,
|
||||
model: 'gpt-3.5-turbo',
|
||||
temperature: 0,
|
||||
};
|
||||
endpointOption = {
|
||||
endpoint,
|
||||
tools: currentConversation?.tools ?? [],
|
||||
model:
|
||||
currentConversation?.model ??
|
||||
endpointsConfig[endpoint]?.availableModels?.[0] ??
|
||||
'gpt-3.5-turbo',
|
||||
chatGptLabel: currentConversation?.chatGptLabel ?? null,
|
||||
promptPrefix: currentConversation?.promptPrefix ?? null,
|
||||
temperature: currentConversation?.temperature ?? 0.8,
|
||||
top_p: currentConversation?.top_p ?? 1,
|
||||
presence_penalty: currentConversation?.presence_penalty ?? 0,
|
||||
frequency_penalty: currentConversation?.frequency_penalty ?? 0,
|
||||
token: endpointsConfig[endpoint]?.userProvide ? getToken() : null,
|
||||
agentOptions,
|
||||
};
|
||||
responseSender = 'ChatGPT';
|
||||
} else if (endpoint === null) {
|
||||
console.error('No endpoint available');
|
||||
return;
|
||||
} else {
|
||||
console.error(`Unknown endpoint ${endpoint}`);
|
||||
return;
|
||||
}
|
||||
|
||||
let currentMessages = messages;
|
||||
|
||||
// construct the query message
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
text = text.trim();
|
||||
const fakeMessageId = v4();
|
||||
parentMessageId =
|
||||
parentMessageId || latestMessage?.messageId || '00000000-0000-0000-0000-000000000000';
|
||||
conversationId = conversationId || currentConversation?.conversationId;
|
||||
if (conversationId == 'search') {
|
||||
console.error('cannot send any message under search view!');
|
||||
return;
|
||||
}
|
||||
if (conversationId == 'new') {
|
||||
parentMessageId = '00000000-0000-0000-0000-000000000000';
|
||||
currentMessages = [];
|
||||
conversationId = null;
|
||||
}
|
||||
const currentMsg = {
|
||||
sender: 'User',
|
||||
text,
|
||||
current: true,
|
||||
isCreatedByUser: true,
|
||||
parentMessageId,
|
||||
conversationId,
|
||||
messageId: fakeMessageId,
|
||||
};
|
||||
|
||||
// construct the placeholder response message
|
||||
const initialResponse = {
|
||||
sender: responseSender,
|
||||
text: '<span className="result-streaming">█</span>',
|
||||
parentMessageId: isRegenerate ? messageId : fakeMessageId,
|
||||
messageId: (isRegenerate ? messageId : fakeMessageId) + '_',
|
||||
conversationId,
|
||||
unfinished: false,
|
||||
submitting: true,
|
||||
};
|
||||
|
||||
const submission = {
|
||||
conversation: {
|
||||
...currentConversation,
|
||||
conversationId,
|
||||
},
|
||||
endpointOption,
|
||||
message: {
|
||||
...currentMsg,
|
||||
overrideParentMessageId: isRegenerate ? messageId : null,
|
||||
},
|
||||
messages: currentMessages,
|
||||
isRegenerate,
|
||||
initialResponse,
|
||||
};
|
||||
|
||||
console.log('User Input:', text, submission);
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([...currentMessages, initialResponse]);
|
||||
} else {
|
||||
setMessages([...currentMessages, currentMsg, initialResponse]);
|
||||
}
|
||||
setSubmission(submission);
|
||||
};
|
||||
|
||||
const regenerate = ({ parentMessageId }) => {
|
||||
const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isRegenerate: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const stopGenerating = () => {
|
||||
setSubmission(null);
|
||||
};
|
||||
|
||||
return { ask, regenerate, stopGenerating };
|
||||
};
|
||||
|
||||
export { useMessageHandler };
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export const languages = [
|
||||
'java',
|
||||
'c',
|
||||
'markdown',
|
||||
'css',
|
||||
'html',
|
||||
'xml',
|
||||
'bash',
|
||||
'json',
|
||||
'yaml',
|
||||
'jsx',
|
||||
'python',
|
||||
'c++',
|
||||
'javascript',
|
||||
'csharp',
|
||||
'php',
|
||||
'typescript',
|
||||
'swift',
|
||||
'objectivec',
|
||||
'sql',
|
||||
'r',
|
||||
'kotlin',
|
||||
'ruby',
|
||||
'go',
|
||||
'x86asm',
|
||||
'matlab',
|
||||
'perl',
|
||||
'pascal',
|
||||
];
|
||||
|
||||
export const alternateName = {
|
||||
openAI: 'OpenAI',
|
||||
azureOpenAI: 'Azure OpenAI',
|
||||
bingAI: 'Bing',
|
||||
chatGPTBrowser: 'ChatGPT',
|
||||
gptPlugins: 'Plugins',
|
||||
google: 'PaLM',
|
||||
anthropic: 'Anthropic',
|
||||
};
|
||||
67
client/src/utils/index.ts
Normal file
67
client/src/utils/index.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export * from './languages';
|
||||
export { default as getError } from './getError';
|
||||
export { default as buildTree } from './buildTree';
|
||||
export { default as cleanupPreset } from './cleanupPreset';
|
||||
export { default as getDefaultConversation } from './getDefaultConversation';
|
||||
|
||||
export function cn(...inputs: string[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export const languages = [
|
||||
'java',
|
||||
'c',
|
||||
'markdown',
|
||||
'css',
|
||||
'html',
|
||||
'xml',
|
||||
'bash',
|
||||
'json',
|
||||
'yaml',
|
||||
'jsx',
|
||||
'python',
|
||||
'c++',
|
||||
'javascript',
|
||||
'csharp',
|
||||
'php',
|
||||
'typescript',
|
||||
'swift',
|
||||
'objectivec',
|
||||
'sql',
|
||||
'r',
|
||||
'kotlin',
|
||||
'ruby',
|
||||
'go',
|
||||
'x86asm',
|
||||
'matlab',
|
||||
'perl',
|
||||
'pascal',
|
||||
];
|
||||
|
||||
export const alternateName = {
|
||||
openAI: 'OpenAI',
|
||||
azureOpenAI: 'Azure OpenAI',
|
||||
bingAI: 'Bing',
|
||||
chatGPTBrowser: 'ChatGPT',
|
||||
gptPlugins: 'Plugins',
|
||||
google: 'PaLM',
|
||||
anthropic: 'Anthropic',
|
||||
};
|
||||
|
||||
export const removeFocusOutlines =
|
||||
'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
|
||||
|
||||
export const cardStyle =
|
||||
'transition-colors rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
|
||||
|
||||
export const defaultTextProps =
|
||||
'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] 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-500 dark:bg-gray-700 focus:dark:bg-gray-600 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';
|
||||
|
||||
export const optionText =
|
||||
'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
|
||||
|
||||
export const defaultTextPropsLabel =
|
||||
'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';
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
const languages = new Set([
|
||||
'adoc',
|
||||
'apacheconf',
|
||||
'arm',
|
||||
'as',
|
||||
'asc',
|
||||
'atom',
|
||||
'bat',
|
||||
'bf',
|
||||
'bind',
|
||||
'c++',
|
||||
'capnp',
|
||||
'cc',
|
||||
'clj',
|
||||
'cls',
|
||||
'cmake.in',
|
||||
'cmd',
|
||||
'coffee',
|
||||
'console',
|
||||
'cr',
|
||||
'craftcms',
|
||||
'crm',
|
||||
'cs',
|
||||
'cson',
|
||||
'cts',
|
||||
'cxx',
|
||||
'dfm',
|
||||
'docker',
|
||||
'dst',
|
||||
'erl',
|
||||
'f90',
|
||||
'f95',
|
||||
'fs',
|
||||
'gawk',
|
||||
'gemspec',
|
||||
'gms',
|
||||
'golang',
|
||||
'gololang',
|
||||
'gss',
|
||||
'gyp',
|
||||
'h',
|
||||
'h++',
|
||||
'hbs',
|
||||
'hh',
|
||||
'hpp',
|
||||
'hs',
|
||||
'html',
|
||||
'html.handlebars',
|
||||
'html.hbs',
|
||||
'https',
|
||||
'hx',
|
||||
'hxx',
|
||||
'hylang',
|
||||
'i7',
|
||||
'iced',
|
||||
'ino',
|
||||
'instances',
|
||||
'irb',
|
||||
'jinja',
|
||||
'js',
|
||||
'jsp',
|
||||
'jsx',
|
||||
'julia-repl',
|
||||
'kdb',
|
||||
'kt',
|
||||
'lassoscript',
|
||||
'ls',
|
||||
'ls',
|
||||
'mak',
|
||||
'make',
|
||||
'mawk',
|
||||
'md',
|
||||
'mipsasm',
|
||||
'mk',
|
||||
'mkd',
|
||||
'mkdown',
|
||||
'ml',
|
||||
'ml',
|
||||
'mm',
|
||||
'mma',
|
||||
'moon',
|
||||
'mts',
|
||||
'nawk',
|
||||
'nc',
|
||||
'nginxconf',
|
||||
'nimrod',
|
||||
'objc',
|
||||
'obj-c',
|
||||
'obj-c++',
|
||||
'objective-c++',
|
||||
'osascript',
|
||||
'pas',
|
||||
'pascal',
|
||||
'patch',
|
||||
'pcmk',
|
||||
'pf.conf',
|
||||
'pl',
|
||||
'plist',
|
||||
'pm',
|
||||
'podspec',
|
||||
'postgres',
|
||||
'postgresql',
|
||||
'pp',
|
||||
'ps',
|
||||
'ps1',
|
||||
'py',
|
||||
'pycon',
|
||||
'rb',
|
||||
're',
|
||||
'rs',
|
||||
'rss',
|
||||
'sas',
|
||||
'scad',
|
||||
'sci',
|
||||
'sh',
|
||||
'st',
|
||||
'stanfuncs',
|
||||
'step',
|
||||
'stp',
|
||||
'styl',
|
||||
'svg',
|
||||
'tao',
|
||||
'text',
|
||||
'thor',
|
||||
'tk',
|
||||
'toml',
|
||||
'ts',
|
||||
'tsx',
|
||||
'txt',
|
||||
'v',
|
||||
'vb',
|
||||
'vbs',
|
||||
'wl',
|
||||
'x++',
|
||||
'xhtml',
|
||||
'xjb',
|
||||
'xls',
|
||||
'xlsx',
|
||||
'xpath',
|
||||
'xq',
|
||||
'xsd',
|
||||
'xsl',
|
||||
'yaml',
|
||||
'zep',
|
||||
'zone',
|
||||
'zsh',
|
||||
'1c',
|
||||
'abnf',
|
||||
'accesslog',
|
||||
'actionscript',
|
||||
'ada',
|
||||
'angelscript',
|
||||
'apache',
|
||||
'applescript',
|
||||
'arcade',
|
||||
'arduino',
|
||||
'armasm',
|
||||
'asciidoc',
|
||||
'aspectj',
|
||||
'autohotkey',
|
||||
'autoit',
|
||||
'avrasm',
|
||||
'awk',
|
||||
'axapta',
|
||||
'bash',
|
||||
'basic',
|
||||
'bnf',
|
||||
'brainfuck',
|
||||
'c',
|
||||
'cal',
|
||||
'capnproto',
|
||||
'clojure',
|
||||
'cmake',
|
||||
'coffeescript',
|
||||
'coq',
|
||||
'cos',
|
||||
'cpp',
|
||||
'crmsh',
|
||||
'crystal',
|
||||
'csharp',
|
||||
'csp',
|
||||
'css',
|
||||
'd',
|
||||
'dart',
|
||||
'diff',
|
||||
'django',
|
||||
'dns',
|
||||
'dockerfile',
|
||||
'dos',
|
||||
'dpr',
|
||||
'dsconfig',
|
||||
'dts',
|
||||
'dust',
|
||||
'ebnf',
|
||||
'elixir',
|
||||
'elm',
|
||||
'erlang',
|
||||
'excel',
|
||||
'fix',
|
||||
'fortran',
|
||||
'fsharp',
|
||||
'gams',
|
||||
'gauss',
|
||||
'gcode',
|
||||
'gherkin',
|
||||
'glsl',
|
||||
'go',
|
||||
'golo',
|
||||
'gradle',
|
||||
'graph',
|
||||
'graphql',
|
||||
'groovy',
|
||||
'haml',
|
||||
'handlebars',
|
||||
'haskell',
|
||||
'haxe',
|
||||
'http',
|
||||
'hy',
|
||||
'inform7',
|
||||
'ini',
|
||||
'irpf90',
|
||||
'java',
|
||||
'javascript',
|
||||
'json',
|
||||
'julia',
|
||||
'k',
|
||||
'kotlin',
|
||||
'lasso',
|
||||
'ldif',
|
||||
'leaf',
|
||||
'less',
|
||||
'lisp',
|
||||
'livecodeserver',
|
||||
'livescript',
|
||||
'lua',
|
||||
'makefile',
|
||||
'markdown',
|
||||
'mathematica',
|
||||
'matlab',
|
||||
'maxima',
|
||||
'mel',
|
||||
'mercury',
|
||||
'mips',
|
||||
'mizar',
|
||||
'mojolicious',
|
||||
'monkey',
|
||||
'moonscript',
|
||||
'n1ql',
|
||||
'nginx',
|
||||
'nim',
|
||||
'nix',
|
||||
'nsis',
|
||||
'objectivec',
|
||||
'ocaml',
|
||||
'openscad',
|
||||
'oxygene',
|
||||
'p21',
|
||||
'parser3',
|
||||
'perl',
|
||||
'pf',
|
||||
'pgsql',
|
||||
'php',
|
||||
'plaintext',
|
||||
'pony',
|
||||
'powershell',
|
||||
'processing',
|
||||
'profile',
|
||||
'prolog',
|
||||
'properties',
|
||||
'protobuf',
|
||||
'puppet',
|
||||
'python',
|
||||
'python-repl',
|
||||
'qml',
|
||||
'r',
|
||||
'reasonml',
|
||||
'rib',
|
||||
'rsl',
|
||||
'ruby',
|
||||
'ruleslanguage',
|
||||
'rust',
|
||||
'SAS',
|
||||
'scala' ,
|
||||
'scheme',
|
||||
'scilab',
|
||||
'scss',
|
||||
'shell',
|
||||
'smali',
|
||||
'smalltalk',
|
||||
'sml',
|
||||
'sql',
|
||||
'stan',
|
||||
'stata',
|
||||
'stylus',
|
||||
'subunit',
|
||||
'swift',
|
||||
'tap',
|
||||
'tcl',
|
||||
'tex',
|
||||
'thrift',
|
||||
'tp',
|
||||
'twig',
|
||||
'typescript',
|
||||
'vala',
|
||||
'vbnet',
|
||||
'vbscript',
|
||||
'verilog',
|
||||
'vhdl',
|
||||
'vim',
|
||||
'x86asm',
|
||||
'xl',
|
||||
'xml',
|
||||
'xquery',
|
||||
'yml',
|
||||
'zephir',
|
||||
]);
|
||||
|
||||
const langSubset = [
|
||||
'python',
|
||||
'javascript',
|
||||
'java',
|
||||
'go',
|
||||
'bash',
|
||||
'c',
|
||||
'cpp',
|
||||
'csharp',
|
||||
'css',
|
||||
'diff',
|
||||
'graphql',
|
||||
'json',
|
||||
'kotlin',
|
||||
'less',
|
||||
'lua',
|
||||
'makefile',
|
||||
'markdown',
|
||||
'objectivec',
|
||||
'perl',
|
||||
'php',
|
||||
'php-template',
|
||||
'plaintext',
|
||||
'python-repl',
|
||||
'r',
|
||||
'ruby',
|
||||
'rust',
|
||||
'scss',
|
||||
'shell',
|
||||
'sql',
|
||||
'swift',
|
||||
'typescript',
|
||||
'vbnet',
|
||||
'wasm',
|
||||
'xml',
|
||||
'yaml',
|
||||
];
|
||||
|
||||
export { languages, langSubset };
|
||||
356
client/src/utils/languages.ts
Normal file
356
client/src/utils/languages.ts
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
const languages = new Set([
|
||||
'adoc',
|
||||
'apacheconf',
|
||||
'arm',
|
||||
'as',
|
||||
'asc',
|
||||
'atom',
|
||||
'bat',
|
||||
'bf',
|
||||
'bind',
|
||||
'c++',
|
||||
'capnp',
|
||||
'cc',
|
||||
'clj',
|
||||
'cls',
|
||||
'cmake.in',
|
||||
'cmd',
|
||||
'coffee',
|
||||
'console',
|
||||
'cr',
|
||||
'craftcms',
|
||||
'crm',
|
||||
'cs',
|
||||
'cson',
|
||||
'cts',
|
||||
'cxx',
|
||||
'dfm',
|
||||
'docker',
|
||||
'dst',
|
||||
'erl',
|
||||
'f90',
|
||||
'f95',
|
||||
'fs',
|
||||
'gawk',
|
||||
'gemspec',
|
||||
'gms',
|
||||
'golang',
|
||||
'gololang',
|
||||
'gss',
|
||||
'gyp',
|
||||
'h',
|
||||
'h++',
|
||||
'hbs',
|
||||
'hh',
|
||||
'hpp',
|
||||
'hs',
|
||||
'html',
|
||||
'html.handlebars',
|
||||
'html.hbs',
|
||||
'https',
|
||||
'hx',
|
||||
'hxx',
|
||||
'hylang',
|
||||
'i7',
|
||||
'iced',
|
||||
'ino',
|
||||
'instances',
|
||||
'irb',
|
||||
'jinja',
|
||||
'js',
|
||||
'jsp',
|
||||
'jsx',
|
||||
'julia-repl',
|
||||
'kdb',
|
||||
'kt',
|
||||
'lassoscript',
|
||||
'ls',
|
||||
'ls',
|
||||
'mak',
|
||||
'make',
|
||||
'mawk',
|
||||
'md',
|
||||
'mipsasm',
|
||||
'mk',
|
||||
'mkd',
|
||||
'mkdown',
|
||||
'ml',
|
||||
'ml',
|
||||
'mm',
|
||||
'mma',
|
||||
'moon',
|
||||
'mts',
|
||||
'nawk',
|
||||
'nc',
|
||||
'nginxconf',
|
||||
'nimrod',
|
||||
'objc',
|
||||
'obj-c',
|
||||
'obj-c++',
|
||||
'objective-c++',
|
||||
'osascript',
|
||||
'pas',
|
||||
'pascal',
|
||||
'patch',
|
||||
'pcmk',
|
||||
'pf.conf',
|
||||
'pl',
|
||||
'plist',
|
||||
'pm',
|
||||
'podspec',
|
||||
'postgres',
|
||||
'postgresql',
|
||||
'pp',
|
||||
'ps',
|
||||
'ps1',
|
||||
'py',
|
||||
'pycon',
|
||||
'rb',
|
||||
're',
|
||||
'rs',
|
||||
'rss',
|
||||
'sas',
|
||||
'scad',
|
||||
'sci',
|
||||
'sh',
|
||||
'st',
|
||||
'stanfuncs',
|
||||
'step',
|
||||
'stp',
|
||||
'styl',
|
||||
'svg',
|
||||
'tao',
|
||||
'text',
|
||||
'thor',
|
||||
'tk',
|
||||
'toml',
|
||||
'ts',
|
||||
'tsx',
|
||||
'txt',
|
||||
'v',
|
||||
'vb',
|
||||
'vbs',
|
||||
'wl',
|
||||
'x++',
|
||||
'xhtml',
|
||||
'xjb',
|
||||
'xls',
|
||||
'xlsx',
|
||||
'xpath',
|
||||
'xq',
|
||||
'xsd',
|
||||
'xsl',
|
||||
'yaml',
|
||||
'zep',
|
||||
'zone',
|
||||
'zsh',
|
||||
'1c',
|
||||
'abnf',
|
||||
'accesslog',
|
||||
'actionscript',
|
||||
'ada',
|
||||
'angelscript',
|
||||
'apache',
|
||||
'applescript',
|
||||
'arcade',
|
||||
'arduino',
|
||||
'armasm',
|
||||
'asciidoc',
|
||||
'aspectj',
|
||||
'autohotkey',
|
||||
'autoit',
|
||||
'avrasm',
|
||||
'awk',
|
||||
'axapta',
|
||||
'bash',
|
||||
'basic',
|
||||
'bnf',
|
||||
'brainfuck',
|
||||
'c',
|
||||
'cal',
|
||||
'capnproto',
|
||||
'clojure',
|
||||
'cmake',
|
||||
'coffeescript',
|
||||
'coq',
|
||||
'cos',
|
||||
'cpp',
|
||||
'crmsh',
|
||||
'crystal',
|
||||
'csharp',
|
||||
'csp',
|
||||
'css',
|
||||
'd',
|
||||
'dart',
|
||||
'diff',
|
||||
'django',
|
||||
'dns',
|
||||
'dockerfile',
|
||||
'dos',
|
||||
'dpr',
|
||||
'dsconfig',
|
||||
'dts',
|
||||
'dust',
|
||||
'ebnf',
|
||||
'elixir',
|
||||
'elm',
|
||||
'erlang',
|
||||
'excel',
|
||||
'fix',
|
||||
'fortran',
|
||||
'fsharp',
|
||||
'gams',
|
||||
'gauss',
|
||||
'gcode',
|
||||
'gherkin',
|
||||
'glsl',
|
||||
'go',
|
||||
'golo',
|
||||
'gradle',
|
||||
'graph',
|
||||
'graphql',
|
||||
'groovy',
|
||||
'haml',
|
||||
'handlebars',
|
||||
'haskell',
|
||||
'haxe',
|
||||
'http',
|
||||
'hy',
|
||||
'inform7',
|
||||
'ini',
|
||||
'irpf90',
|
||||
'java',
|
||||
'javascript',
|
||||
'json',
|
||||
'julia',
|
||||
'k',
|
||||
'kotlin',
|
||||
'lasso',
|
||||
'ldif',
|
||||
'leaf',
|
||||
'less',
|
||||
'lisp',
|
||||
'livecodeserver',
|
||||
'livescript',
|
||||
'lua',
|
||||
'makefile',
|
||||
'markdown',
|
||||
'mathematica',
|
||||
'matlab',
|
||||
'maxima',
|
||||
'mel',
|
||||
'mercury',
|
||||
'mips',
|
||||
'mizar',
|
||||
'mojolicious',
|
||||
'monkey',
|
||||
'moonscript',
|
||||
'n1ql',
|
||||
'nginx',
|
||||
'nim',
|
||||
'nix',
|
||||
'nsis',
|
||||
'objectivec',
|
||||
'ocaml',
|
||||
'openscad',
|
||||
'oxygene',
|
||||
'p21',
|
||||
'parser3',
|
||||
'perl',
|
||||
'pf',
|
||||
'pgsql',
|
||||
'php',
|
||||
'plaintext',
|
||||
'pony',
|
||||
'powershell',
|
||||
'processing',
|
||||
'profile',
|
||||
'prolog',
|
||||
'properties',
|
||||
'protobuf',
|
||||
'puppet',
|
||||
'python',
|
||||
'python-repl',
|
||||
'qml',
|
||||
'r',
|
||||
'reasonml',
|
||||
'rib',
|
||||
'rsl',
|
||||
'ruby',
|
||||
'ruleslanguage',
|
||||
'rust',
|
||||
'SAS',
|
||||
'scala',
|
||||
'scheme',
|
||||
'scilab',
|
||||
'scss',
|
||||
'shell',
|
||||
'smali',
|
||||
'smalltalk',
|
||||
'sml',
|
||||
'sql',
|
||||
'stan',
|
||||
'stata',
|
||||
'stylus',
|
||||
'subunit',
|
||||
'swift',
|
||||
'tap',
|
||||
'tcl',
|
||||
'tex',
|
||||
'thrift',
|
||||
'tp',
|
||||
'twig',
|
||||
'typescript',
|
||||
'vala',
|
||||
'vbnet',
|
||||
'vbscript',
|
||||
'verilog',
|
||||
'vhdl',
|
||||
'vim',
|
||||
'x86asm',
|
||||
'xl',
|
||||
'xml',
|
||||
'xquery',
|
||||
'yml',
|
||||
'zephir',
|
||||
]);
|
||||
|
||||
const langSubset = [
|
||||
'python',
|
||||
'javascript',
|
||||
'java',
|
||||
'go',
|
||||
'bash',
|
||||
'c',
|
||||
'cpp',
|
||||
'csharp',
|
||||
'css',
|
||||
'diff',
|
||||
'graphql',
|
||||
'json',
|
||||
'kotlin',
|
||||
'less',
|
||||
'lua',
|
||||
'makefile',
|
||||
'markdown',
|
||||
'objectivec',
|
||||
'perl',
|
||||
'php',
|
||||
'php-template',
|
||||
'plaintext',
|
||||
'python-repl',
|
||||
'r',
|
||||
'ruby',
|
||||
'rust',
|
||||
'scss',
|
||||
'shell',
|
||||
'sql',
|
||||
'swift',
|
||||
'typescript',
|
||||
'vbnet',
|
||||
'wasm',
|
||||
'xml',
|
||||
'yaml',
|
||||
];
|
||||
|
||||
export { languages, langSubset };
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { createContext, useRef, useContext } from 'react';
|
||||
import html2canvas from 'html2canvas';
|
||||
|
||||
const ScreenshotContext = createContext({});
|
||||
|
||||
export const useScreenshot = () => {
|
||||
const { ref } = useContext(ScreenshotContext);
|
||||
|
||||
const takeScreenShot = (node) => {
|
||||
if (!node) {
|
||||
throw new Error('You should provide correct html node.');
|
||||
}
|
||||
return html2canvas(node).then((canvas) => {
|
||||
const croppedCanvas = document.createElement('canvas');
|
||||
const croppedCanvasContext = croppedCanvas.getContext('2d');
|
||||
// init data
|
||||
const cropPositionTop = 0;
|
||||
const cropPositionLeft = 0;
|
||||
const cropWidth = canvas.width;
|
||||
const cropHeight = canvas.height;
|
||||
|
||||
croppedCanvas.width = cropWidth;
|
||||
croppedCanvas.height = cropHeight;
|
||||
|
||||
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
|
||||
|
||||
const base64Image = croppedCanvas.toDataURL('image/png', 1);
|
||||
|
||||
return base64Image;
|
||||
});
|
||||
};
|
||||
|
||||
const captureScreenshot = () => {
|
||||
return takeScreenShot(ref.current);
|
||||
};
|
||||
|
||||
return { screenshotTargetRef: ref, captureScreenshot };
|
||||
};
|
||||
|
||||
export const ScreenshotProvider = ({ children }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
return <ScreenshotContext.Provider value={{ ref }}>{children}</ScreenshotContext.Provider>;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue