diff --git a/api/app/clients/OpenAIClient.js b/api/app/clients/OpenAIClient.js index 2c075fdf72..368e7d6e84 100644 --- a/api/app/clients/OpenAIClient.js +++ b/api/app/clients/OpenAIClient.js @@ -1066,9 +1066,14 @@ ${convo} }); } - getStreamText() { + /** + * + * @param {string[]} [intermediateReply] + * @returns {string} + */ + getStreamText(intermediateReply) { if (!this.streamHandler) { - return ''; + return intermediateReply?.join('') ?? ''; } let thinkMatch; @@ -1088,7 +1093,10 @@ ${convo} } } - const reasoningTokens = reasoningText.length > 0 ? `:::thinking\n${reasoningText}\n:::\n` : ''; + const reasoningTokens = + reasoningText.length > 0 + ? `:::thinking\n${reasoningText.replace('', '').replace('', '').trim()}\n:::\n` + : ''; return `${reasoningTokens}${this.streamHandler.tokens.join('')}`; } @@ -1327,11 +1335,19 @@ ${convo} streamPromise = new Promise((resolve) => { streamResolve = resolve; }); + /** @type {OpenAI.OpenAI.CompletionCreateParamsStreaming} */ + const params = { + ...modelOptions, + stream: true, + }; + if ( + this.options.endpoint === EModelEndpoint.openAI || + this.options.endpoint === EModelEndpoint.azureOpenAI + ) { + params.stream_options = { include_usage: true }; + } const stream = await openai.beta.chat.completions - .stream({ - ...modelOptions, - stream: true, - }) + .stream(params) .on('abort', () => { /* Do nothing here */ }) @@ -1471,7 +1487,7 @@ ${convo} err?.message?.includes('abort') || (err instanceof OpenAI.APIError && err?.message?.includes('abort')) ) { - return intermediateReply.join(''); + return this.getStreamText(intermediateReply); } if ( err?.message?.includes( @@ -1489,7 +1505,7 @@ ${convo} if (this.streamHandler && this.streamHandler.reasoningTokens.length) { return this.getStreamText(); } else if (intermediateReply.length > 0) { - return intermediateReply.join(''); + return this.getStreamText(intermediateReply); } else { throw err; } @@ -1497,7 +1513,7 @@ ${convo} if (this.streamHandler && this.streamHandler.reasoningTokens.length) { return this.getStreamText(); } else if (intermediateReply.length > 0) { - return intermediateReply.join(''); + return this.getStreamText(intermediateReply); } else { throw err; } diff --git a/api/models/schema/agent.js b/api/models/schema/agent.js index 2006859ab6..53e49e1cfd 100644 --- a/api/models/schema/agent.js +++ b/api/models/schema/agent.js @@ -35,6 +35,9 @@ const agentSchema = mongoose.Schema( model_parameters: { type: Object, }, + artifacts: { + type: String, + }, access_level: { type: Number, }, diff --git a/api/server/services/Endpoints/agents/initialize.js b/api/server/services/Endpoints/agents/initialize.js index 15a310030a..3e03a45125 100644 --- a/api/server/services/Endpoints/agents/initialize.js +++ b/api/server/services/Endpoints/agents/initialize.js @@ -13,6 +13,7 @@ const getBedrockOptions = require('~/server/services/Endpoints/bedrock/options') const initOpenAI = require('~/server/services/Endpoints/openAI/initialize'); const initCustom = require('~/server/services/Endpoints/custom/initialize'); const initGoogle = require('~/server/services/Endpoints/google/initialize'); +const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts'); const { getCustomEndpointConfig } = require('~/server/services/Config'); const { loadAgentTools } = require('~/server/services/ToolService'); const AgentClient = require('~/server/controllers/agents/client'); @@ -72,6 +73,16 @@ const primeResources = async (_attachments, _tool_resources) => { } }; +/** + * @param {object} params + * @param {ServerRequest} params.req + * @param {ServerResponse} params.res + * @param {Agent} params.agent + * @param {object} [params.endpointOption] + * @param {AgentToolResources} [params.tool_resources] + * @param {boolean} [params.isInitialAgent] + * @returns {Promise} + */ const initializeAgentOptions = async ({ req, res, @@ -132,6 +143,13 @@ const initializeAgentOptions = async ({ agent.model_parameters.model = agent.model; } + if (typeof agent.artifacts === 'string' && agent.artifacts !== '') { + agent.additional_instructions = generateArtifactsPrompt({ + endpoint: agent.provider, + artifacts: agent.artifacts, + }); + } + const tokensModel = agent.provider === EModelEndpoint.azureOpenAI ? agent.model : agent.model_parameters.model; diff --git a/api/server/utils/handleText.js b/api/server/utils/handleText.js index e46584c805..8c681d8f4e 100644 --- a/api/server/utils/handleText.js +++ b/api/server/utils/handleText.js @@ -200,6 +200,7 @@ function generateConfig(key, baseURL, endpoint) { config.capabilities = [ AgentCapabilities.execute_code, AgentCapabilities.file_search, + AgentCapabilities.artifacts, AgentCapabilities.actions, AgentCapabilities.tools, ]; diff --git a/client/src/common/agents-types.ts b/client/src/common/agents-types.ts index 7f64f07882..a9c24106bc 100644 --- a/client/src/common/agents-types.ts +++ b/client/src/common/agents-types.ts @@ -1,4 +1,4 @@ -import { AgentCapabilities } from 'librechat-data-provider'; +import { AgentCapabilities, ArtifactModes } from 'librechat-data-provider'; import type { Agent, AgentProvider, AgentModelParameters } from 'librechat-data-provider'; import type { OptionWithIcon, ExtendedFile } from './types'; @@ -9,8 +9,8 @@ export type TAgentOption = OptionWithIcon & }; export type TAgentCapabilities = { - [AgentCapabilities.execute_code]: boolean; [AgentCapabilities.file_search]: boolean; + [AgentCapabilities.execute_code]: boolean; [AgentCapabilities.end_after_tools]?: boolean; [AgentCapabilities.hide_sequential_outputs]?: boolean; }; @@ -26,4 +26,5 @@ export type AgentForm = { tools?: string[]; provider?: AgentProvider | OptionWithIcon; agent_ids?: string[]; + [AgentCapabilities.artifacts]?: ArtifactModes | string; } & TAgentCapabilities; diff --git a/client/src/common/types.ts b/client/src/common/types.ts index 151314faa8..3d61eccb1c 100644 --- a/client/src/common/types.ts +++ b/client/src/common/types.ts @@ -68,8 +68,8 @@ export type GenericSetter = (value: T | ((currentValue: T) => T)) => void; export type LastSelectedModels = Record; export type LocalizeFunction = ( - phraseKey: TranslationKeys, - options?: Record + phraseKey: TranslationKeys, + options?: Record, ) => string; export type ChatFormValues = { text: string }; @@ -89,6 +89,7 @@ export type IconMapProps = { iconURL?: string; context?: 'landing' | 'menu-item' | 'nav' | 'message'; endpoint?: string | null; + endpointType?: string; assistantName?: string; agentName?: string; avatar?: string; diff --git a/client/src/components/Chat/ChatView.tsx b/client/src/components/Chat/ChatView.tsx index 0ee64ef62b..dbf39ee845 100644 --- a/client/src/components/Chat/ChatView.tsx +++ b/client/src/components/Chat/ChatView.tsx @@ -28,7 +28,7 @@ function ChatView({ index = 0 }: { index?: number }) { select: useCallback( (data: TMessage[]) => { const dataTree = buildTree({ messages: data, fileMap }); - return dataTree?.length === 0 ? null : dataTree ?? null; + return dataTree?.length === 0 ? null : (dataTree ?? null); }, [fileMap], ), @@ -62,7 +62,7 @@ function ChatView({ index = 0 }: { index?: number }) { - + {content}
diff --git a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx index d062f4276a..f0918240ba 100644 --- a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx +++ b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx @@ -7,6 +7,9 @@ import FinishedIcon from './FinishedIcon'; import MarkdownLite from './MarkdownLite'; import store from '~/store'; +const radius = 56.08695652173913; +const circumference = 2 * Math.PI * radius; + export default function CodeAnalyze({ initialProgress = 0.1, code, @@ -22,9 +25,6 @@ export default function CodeAnalyze({ const progress = useProgress(initialProgress); const showAnalysisCode = useRecoilValue(store.showCode); const [showCode, setShowCode] = useState(showAnalysisCode); - - const radius = 56.08695652173913; - const circumference = 2 * Math.PI * radius; const offset = circumference - progress * circumference; const logs = outputs.reduce((acc, output) => { @@ -53,9 +53,10 @@ export default function CodeAnalyze({ setShowCode((prev) => !prev)} - inProgressText="Analyzing" - finishedText="Finished analyzing" + inProgressText={localize('com_ui_analyzing')} + finishedText={localize('com_ui_analyzing_finished')} hasInput={!!code.length} + isExpanded={showCode} />
{showCode && ( diff --git a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx index 49a15fc71c..93fdab434e 100644 --- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx +++ b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx @@ -4,10 +4,10 @@ import type { TAttachment } from 'librechat-data-provider'; import ProgressText from '~/components/Chat/Messages/Content/ProgressText'; import FinishedIcon from '~/components/Chat/Messages/Content/FinishedIcon'; import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite'; +import { useProgress, useLocalize } from '~/hooks'; import { CodeInProgress } from './CodeProgress'; import Attachment from './Attachment'; import LogContent from './LogContent'; -import { useProgress } from '~/hooks'; import store from '~/store'; interface ParsedArgs { @@ -36,6 +36,9 @@ export function useParseArgs(args: string): ParsedArgs { }, [args]); } +const radius = 56.08695652173913; +const circumference = 2 * Math.PI * radius; + export default function ExecuteCode({ initialProgress = 0.1, args, @@ -49,14 +52,12 @@ export default function ExecuteCode({ isSubmitting: boolean; attachments?: TAttachment[]; }) { + const localize = useLocalize(); const showAnalysisCode = useRecoilValue(store.showCode); const [showCode, setShowCode] = useState(showAnalysisCode); const { lang, code } = useParseArgs(args); const progress = useProgress(initialProgress); - - const radius = 56.08695652173913; - const circumference = 2 * Math.PI * radius; const offset = circumference - progress * circumference; return ( @@ -78,9 +79,10 @@ export default function ExecuteCode({ setShowCode((prev) => !prev)} - inProgressText="Analyzing" - finishedText="Finished analyzing" + inProgressText={localize('com_ui_analyzing')} + finishedText={localize('com_ui_analyzing_finished')} hasInput={!!code.length} + isExpanded={showCode} /> {showCode && ( @@ -105,9 +107,7 @@ export default function ExecuteCode({ )} )} - {attachments?.map((attachment, index) => ( - - ))} + {attachments?.map((attachment, index) => )} ); } diff --git a/client/src/components/Chat/Messages/Content/ProgressText.tsx b/client/src/components/Chat/Messages/Content/ProgressText.tsx index aaeecd6004..11ec4b291d 100644 --- a/client/src/components/Chat/Messages/Content/ProgressText.tsx +++ b/client/src/components/Chat/Messages/Content/ProgressText.tsx @@ -42,6 +42,7 @@ export default function ProgressText({ authText, hasInput = true, popover = false, + isExpanded = false, }: { progress: number; onClick?: () => void; @@ -50,8 +51,9 @@ export default function ProgressText({ authText?: string; hasInput?: boolean; popover?: boolean; + isExpanded?: boolean; }) { - const text = progress < 1 ? authText ?? inProgressText : finishedText; + const text = progress < 1 ? (authText ?? inProgressText) : finishedText; return ( )} - + diff --git a/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx b/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx index 5d827dd81f..f006d97691 100644 --- a/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx +++ b/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx @@ -29,7 +29,7 @@ export default function FileSearchCheckbox() { {...field} checked={field.value} onCheckedChange={field.onChange} - className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer" + className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer" value={field.value.toString()} /> )} @@ -38,7 +38,6 @@ export default function FileSearchCheckbox() { type="button" className="flex items-center space-x-2" onClick={() => - setValue(AgentCapabilities.file_search, !getValues(AgentCapabilities.file_search), { shouldDirty: true, }) @@ -51,7 +50,7 @@ export default function FileSearchCheckbox() { {localize('com_agents_enable_file_search')} - + diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx index 51977ab157..7660e8b278 100644 --- a/client/src/components/SidePanel/SidePanel.tsx +++ b/client/src/components/SidePanel/SidePanel.tsx @@ -1,78 +1,58 @@ -import throttle from 'lodash/throttle'; -import { getConfigDefaults } from 'librechat-data-provider'; +import { useState, useCallback, useMemo, memo } from 'react'; import { useUserKeyQuery } from 'librechat-data-provider/react-query'; -import { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react'; import type { TEndpointsConfig, TInterfaceConfig } from 'librechat-data-provider'; import type { ImperativePanelHandle } from 'react-resizable-panels'; -import { ResizableHandleAlt, ResizablePanel, ResizablePanelGroup } from '~/components/ui/Resizable'; -import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider'; +import { ResizableHandleAlt, ResizablePanel } from '~/components/ui/Resizable'; import { useMediaQuery, useLocalStorage, useLocalize } from '~/hooks'; import useSideNavLinks from '~/hooks/Nav/useSideNavLinks'; +import { useGetEndpointsQuery } from '~/data-provider'; import NavToggle from '~/components/Nav/NavToggle'; import { cn, getEndpointField } from '~/utils'; import { useChatContext } from '~/Providers'; import Switcher from './Switcher'; import Nav from './Nav'; -interface SidePanelProps { - defaultLayout?: number[] | undefined; - defaultCollapsed?: boolean; - navCollapsedSize?: number; - fullPanelCollapse?: boolean; - artifacts?: React.ReactNode; - children: React.ReactNode; -} - const defaultMinSize = 20; -const defaultInterface = getConfigDefaults().interface; - -const normalizeLayout = (layout: number[]) => { - const sum = layout.reduce((acc, size) => acc + size, 0); - if (Math.abs(sum - 100) < 0.01) { - return layout.map((size) => Number(size.toFixed(2))); - } - - const factor = 100 / sum; - const normalizedLayout = layout.map((size) => Number((size * factor).toFixed(2))); - - const adjustedSum = normalizedLayout.reduce( - (acc, size, index) => (index === layout.length - 1 ? acc : acc + size), - 0, - ); - normalizedLayout[normalizedLayout.length - 1] = Number((100 - adjustedSum).toFixed(2)); - - return normalizedLayout; -}; const SidePanel = ({ - defaultLayout = [97, 3], - defaultCollapsed = false, - fullPanelCollapse = false, + defaultSize, + panelRef, navCollapsedSize = 3, - artifacts, - children, -}: SidePanelProps) => { + hasArtifacts, + minSize, + setMinSize, + collapsedSize, + setCollapsedSize, + isCollapsed, + setIsCollapsed, + fullCollapse, + setFullCollapse, + interfaceConfig, +}: { + defaultSize?: number; + hasArtifacts: boolean; + navCollapsedSize?: number; + minSize: number; + setMinSize: React.Dispatch>; + collapsedSize: number; + setCollapsedSize: React.Dispatch>; + isCollapsed: boolean; + setIsCollapsed: React.Dispatch>; + fullCollapse: boolean; + setFullCollapse: React.Dispatch>; + panelRef: React.RefObject; + interfaceConfig: TInterfaceConfig; +}) => { const localize = useLocalize(); const [isHovering, setIsHovering] = useState(false); - const [minSize, setMinSize] = useState(defaultMinSize); const [newUser, setNewUser] = useLocalStorage('newUser', true); - const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed); - const [fullCollapse, setFullCollapse] = useState(fullPanelCollapse); - const [collapsedSize, setCollapsedSize] = useState(navCollapsedSize); const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery(); - const { data: startupConfig } = useGetStartupConfig(); - const interfaceConfig = useMemo( - () => (startupConfig?.interface ?? defaultInterface) as Partial, - [startupConfig], - ); const isSmallScreen = useMediaQuery('(max-width: 767px)'); const { conversation } = useChatContext(); const { endpoint } = conversation ?? {}; const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(endpoint ?? ''); - const panelRef = useRef(null); - const defaultActive = useMemo(() => { const activePanel = localStorage.getItem('side:active-panel'); return typeof activePanel === 'string' ? activePanel : undefined; @@ -113,46 +93,6 @@ const SidePanel = ({ interfaceConfig, }); - const calculateLayout = useCallback(() => { - if (artifacts == null) { - const navSize = defaultLayout.length === 2 ? defaultLayout[1] : defaultLayout[2]; - return [100 - navSize, navSize]; - } else { - const navSize = 0; - const remainingSpace = 100 - navSize; - const newMainSize = Math.floor(remainingSpace / 2); - const artifactsSize = remainingSpace - newMainSize; - return [newMainSize, artifactsSize, navSize]; - } - }, [artifacts, defaultLayout]); - - const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]); - - // eslint-disable-next-line react-hooks/exhaustive-deps - const throttledSaveLayout = useCallback( - throttle((sizes: number[]) => { - const normalizedSizes = normalizeLayout(sizes); - localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes)); - }, 350), - [], - ); - - useEffect(() => { - if (isSmallScreen) { - setIsCollapsed(true); - setCollapsedSize(0); - setMinSize(defaultMinSize); - setFullCollapse(true); - localStorage.setItem('fullPanelCollapse', 'true'); - panelRef.current?.collapse(); - return; - } else { - setIsCollapsed(defaultCollapsed); - setCollapsedSize(navCollapsedSize); - setMinSize(defaultMinSize); - } - }, [isSmallScreen, defaultCollapsed, navCollapsedSize, fullPanelCollapse]); - const toggleNavVisible = useCallback(() => { if (newUser) { setNewUser(false); @@ -173,127 +113,84 @@ const SidePanel = ({ } }, [isCollapsed, newUser, setNewUser, navCollapsedSize]); - const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]); - return ( <> - throttledSaveLayout(sizes)} - className="transition-width relative h-full w-full flex-1 overflow-auto bg-presentation" +
setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + className="relative flex w-px items-center justify-center" > - - {children} - - {artifacts != null && ( - <> - - - {artifacts} - - - )} -
setIsHovering(true)} - onMouseLeave={() => setIsHovering(false)} - className="relative flex w-px items-center justify-center" - > - -
- {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && ( - - )} - { - setIsCollapsed(false); - localStorage.setItem('react-resizable-panels:collapsed', 'false'); - }} - onCollapse={() => { - setIsCollapsed(true); - localStorage.setItem('react-resizable-panels:collapsed', 'true'); - }} + - {interfaceConfig.modelSelect === true && ( -
- -
- )} -
+ {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && ( + + )} + + onExpand={() => { + setIsCollapsed(false); + localStorage.setItem('react-resizable-panels:collapsed', 'false'); + }} + onCollapse={() => { + setIsCollapsed(true); + localStorage.setItem('react-resizable-panels:collapsed', 'true'); + }} + className={cn( + 'sidenav hide-scrollbar border-l border-border-light bg-background transition-opacity', + isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]', + (isSmallScreen && isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse + ? 'hidden min-w-0' + : 'opacity-100', + )} + > + {interfaceConfig.modelSelect === true && ( +
+ +
+ )} +