🪄 feat: Agent Artifacts (#5804)

* refactor: remove artifacts toggle

* refactor: allow hiding side panel while allowing artifacts view

* chore: rename SidePanelGroup to SidePanel for clarity

* Revert "refactor: remove artifacts toggle"

This reverts commit f884c2cfcd.

* feat: add artifacts capability to agent configuration

* refactor: conditionally set artifacts mode based on endpoint type

* feat: Artifacts Capability for Agents

* refactor: enhance getStreamText method to handle intermediate replies and add `stream_options` for openai/azure

* feat: localize progress text and improve UX in CodeAnalyze and ExecuteCode components for expanding analysis

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({
         <ProgressText
           progress={progress}
           onClick={() => setShowCode((prev) => !prev)}
-          inProgressText="Analyzing"
-          finishedText="Finished analyzing"
+          inProgressText={localize('com_ui_analyzing')}
+          finishedText={localize('com_ui_analyzing_finished')}
           hasInput={!!code.length}
+          isExpanded={showCode}
         />
       </div>
       {showCode && (

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({
         <ProgressText
           progress={progress}
           onClick={() => setShowCode((prev) => !prev)}
-          inProgressText="Analyzing"
-          finishedText="Finished analyzing"
+          inProgressText={localize('com_ui_analyzing')}
+          finishedText={localize('com_ui_analyzing_finished')}
           hasInput={!!code.length}
+          isExpanded={showCode}
         />
       </div>
       {showCode && (
@@ -105,9 +107,7 @@ export default function ExecuteCode({
           )}
         </div>
       )}
-      {attachments?.map((attachment, index) => (
-        <Attachment attachment={attachment} key={index} />
-      ))}
+      {attachments?.map((attachment, index) => <Attachment attachment={attachment} key={index} />)}
     </>
   );
 }

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 (
     <Wrapper popover={popover}>
       <button
@@ -61,7 +63,13 @@ export default function ProgressText({
         onClick={onClick}
       >
         {text}
-        <svg width="16" height="17" viewBox="0 0 16 17" fill="none">
+        <svg
+          width="16"
+          height="17"
+          viewBox="0 0 16 17"
+          fill="none"
+          className={isExpanded ? 'rotate-180' : 'rotate-0'}
+        >
           <path
             className={hasInput ? '' : 'stroke-transparent'}
             d="M11.3346 7.83203L8.00131 11.1654L4.66797 7.83203"