feat(ui): small ui improvs (#911)

Author: PetrBulanek

apps/beeai-ui/src/components/CodeSnippet/CodeSnippet.tsx

@@ -12,17 +12,17 @@ import classes from './CodeSnippet.module.scss';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   forceExpand?: boolean;
-  hideCopyButton?: boolean;
+  canCopy?: boolean;
 }
 
-export function CodeSnippet({ forceExpand, hideCopyButton, ...props }: Props) {
+export function CodeSnippet({ forceExpand, canCopy, ...props }: Props) {
   const ref = useRef<HTMLElement>(null);
 
   const code = <code ref={ref} {...props} />;
 
   return (
     <div className={classes.root}>
-      {!hideCopyButton && (
+      {canCopy && (
         <div className={classes.copyButton}>
           <CopyButton contentRef={ref} size="sm" />
         </div>

apps/beeai-ui/src/components/CopyButton/CopyButton.tsx

@@ -28,7 +28,7 @@ export function CopyButton({ contentRef, size = 'md' }: Props) {
 
     setTimeout(() => {
       setCopied(false);
-    }, 2000);
+    }, COPIED_RESET_TIMEOUT);
   }, [contentRef]);
 
   return (
@@ -37,3 +37,5 @@ export function CopyButton({ contentRef, size = 'md' }: Props) {
     </IconButton>
   );
 }
+
+const COPIED_RESET_TIMEOUT = 2000;

apps/beeai-ui/src/components/MarkdownContent/components/Code.tsx

@@ -39,7 +39,7 @@ export function Code({ inline, forceExpand, className, children }: Props) {
   }
 
   return (
-    <CodeSnippet forceExpand={forceExpand} hideCopyButton={forceExpand}>
+    <CodeSnippet forceExpand={forceExpand} canCopy={!forceExpand}>
       {children}
     </CodeSnippet>
   );

apps/beeai-ui/src/modules/runs/files/components/FileCard.module.scss

@@ -5,7 +5,6 @@
 
 .root {
   display: inline-flex;
-  overflow: hidden;
   max-inline-size: 100%;
   align-items: center;
   position: relative;
@@ -47,8 +46,10 @@
 
 .link {
   @include link-mask();
-  @include line-clamp();
   color: inherit;
+  text-decoration: none;
+  display: flex;
+  min-inline-size: 0;
   &::before {
     z-index: -1;
     border-radius: calc($spacing-03 - 1px);

apps/beeai-ui/src/modules/runs/files/constants.ts

@@ -10,3 +10,5 @@ export const MAX_FILE_SIZE = 100 * 1024 * 1024;
 export const FILE_CONTENT_URL = '/api/v1/files/{file_id}/content';
 
 export const FILE_CONTENT_URL_BASE = 'http://{platform_url}';
+
+export const ALL_FILES_CONTENT_TYPE = '*/*';

apps/beeai-ui/src/modules/runs/files/contexts/FileUploadProvider.tsx

@@ -11,7 +11,7 @@ import { useToast } from '#contexts/Toast/index.ts';
 
 import { useDeleteFile } from '../api/mutations/useDeleteFile';
 import { useUploadFile } from '../api/mutations/useUploadFile';
-import { MAX_FILE_SIZE, MAX_FILES } from '../constants';
+import { ALL_FILES_CONTENT_TYPE, MAX_FILE_SIZE, MAX_FILES } from '../constants';
 import { type FileEntity, FileStatus } from '../types';
 import { FileUploadContext } from './file-upload-context';
 
@@ -89,12 +89,13 @@ export function FileUploadProvider({ allowedContentTypes, children }: PropsWithC
   );
 
   const isDisabled = !allowedContentTypes.length;
+  const accept = allowedContentTypes.reduce(
+    (value, mimeType) => (mimeType === ALL_FILES_CONTENT_TYPE ? value : { ...value, [mimeType]: [] }),
+    {} as Record<string, string[]>,
+  );
 
   const dropzone = useDropzone({
-    accept: allowedContentTypes.reduce(
-      (value, mimeType) => ({ ...value, [mimeType]: [] }),
-      {} as Record<string, string[]>,
-    ),
+    accept,
     disabled: isDisabled,
     noClick: true,
     noKeyboard: true,

apps/beeai-ui/src/modules/runs/hands-off/HandsOffOutputView.module.scss

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+$max-inline-size: rem(608px);
+
 .root {
   display: flex;
   flex-direction: column;
@@ -19,6 +21,7 @@
 .header {
   display: flex;
   column-gap: $spacing-06;
+  max-inline-size: $max-inline-size;
 }
 
 .input {
@@ -33,6 +36,9 @@
   flex-direction: column;
   row-gap: $spacing-06;
   flex-grow: 1;
+  > *:not(.text) {
+    max-inline-size: $max-inline-size;
+  }
 }
 
 .statusBar {

apps/beeai-ui/src/modules/runs/hands-off/HandsOffOutputView.tsx

@@ -19,10 +19,11 @@ export function HandsOffOutputView() {
   const { agent, input, isPending, cancel, clear } = useAgentRun();
   const { messages } = useMessages();
   const message = messages.find(isAgentMessage);
+  const hasOutput = Boolean(message?.content);
 
   return (
     <div className={classes.root}>
-      <Container size="md" className={classes.holder}>
+      <Container size={hasOutput ? 'md' : 'sm'} className={classes.holder}>
         <header className={classes.header}>
           <p className={classes.input}>{input}</p>
 
@@ -34,9 +35,9 @@ export function HandsOffOutputView() {
 
           {message && (
             <>
-              <HandsOffText message={message} />
+              <HandsOffText message={message} className={classes.text} />
 
-              <MessageTrajectories message={message} />
+              <MessageTrajectories message={message} toggleable={hasOutput} autoScroll={!hasOutput} />
             </>
           )}
 

apps/beeai-ui/src/modules/runs/hands-off/HandsOffText.tsx

@@ -13,16 +13,17 @@ import { MessageSources } from '../sources/components/MessageSources';
 
 interface Props {
   message: AgentMessage;
+  className?: string;
 }
 
-export function HandsOffText({ message }: Props) {
+export function HandsOffText({ message, className }: Props) {
   const { agent, isPending } = useAgentRun();
   const output = message.content;
   const { ref: autoScrollRef } = useAutoScroll([output]);
   const sources = message.sources ?? [];
 
   return output ? (
-    <div>
+    <div className={className}>
       <AgentOutputBox sources={sources} text={output} isPending={isPending} downloadFileName={`${agent.name}-output`}>
         <MessageFiles message={message} />
 

apps/beeai-ui/src/modules/runs/trajectory/components/MessageTrajectories.tsx

@@ -9,11 +9,15 @@ import { TrajectoryView } from './TrajectoryView';
 
 interface Props {
   message: AgentMessage;
+  toggleable?: boolean;
+  autoScroll?: boolean;
 }
 
-export function MessageTrajectories({ message }: Props) {
+export function MessageTrajectories({ message, toggleable = true, autoScroll }: Props) {
   const trajectories = message.trajectories ?? [];
   const hasTrajectories = trajectories.length > 0;
 
-  return hasTrajectories ? <TrajectoryView trajectories={trajectories} /> : null;
+  return hasTrajectories ? (
+    <TrajectoryView trajectories={trajectories} toggleable={toggleable} autoScroll={autoScroll} />
+  ) : null;
 }