@wandelbots/wandelbots-js-react-components 2.32.0 → 2.33.0-pr.feature-robot-precondition-list.372.3ad6c62

package/src/components/LogStore.ts

@@ -0,0 +1,40 @@
+import { action, makeObservable, observable } from "mobx"
+import type { LogLevel, LogMessage } from "./LogViewer"
+
+export class LogStore {
+  messages: LogMessage[] = []
+
+  constructor() {
+    makeObservable(this, {
+      messages: observable,
+      addMessage: action,
+      clearMessages: action,
+    })
+  }
+
+  addMessage = (message: string, level: LogLevel = "info") => {
+    const logMessage: LogMessage = {
+      id: Math.random().toString(36).substring(2, 11),
+      timestamp: new Date(),
+      message,
+      level,
+    }
+    this.messages.push(logMessage)
+  }
+
+  clearMessages = () => {
+    this.messages = []
+  }
+
+  addInfo = (message: string) => {
+    this.addMessage(message, "info")
+  }
+
+  addWarning = (message: string) => {
+    this.addMessage(message, "warning")
+  }
+
+  addError = (message: string) => {
+    this.addMessage(message, "error")
+  }
+}

package/src/components/LogViewer.tsx

@@ -0,0 +1,311 @@
+import {
+  ContentCopy,
+  DescriptionOutlined as DocumentIcon,
+  ExpandLess,
+  ExpandMore,
+} from "@mui/icons-material"
+import type { SxProps } from "@mui/material"
+import {
+  Box,
+  Button,
+  IconButton,
+  Paper,
+  Typography,
+  useTheme,
+} from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useEffect, useRef, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+
+export type LogLevel = "info" | "error" | "warning"
+
+export type LogMessage = {
+  id: string
+  timestamp: Date
+  message: string
+  level: LogLevel
+}
+
+export type LogViewerProps = {
+  /** Log messages to display */
+  messages: LogMessage[]
+  /** Callback when clear button is clicked */
+  onClear?: () => void
+  /** Height of the component */
+  height?: string | number
+  /** Additional styles */
+  sx?: SxProps
+}
+
+/**
+ * A log viewer component that displays timestamped log messages with different levels.
+ * Features a header with document icon and clear button, and scrollable message area.
+ */
+export const LogViewer = externalizeComponent(
+  observer((props: LogViewerProps) => {
+    const { messages = [], onClear, height = 400, sx } = props
+    const theme = useTheme()
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+    // Auto-scroll to bottom when new messages are added
+    useEffect(() => {
+      if (messages.length === 0) return
+
+      const scrollContainer = scrollContainerRef.current
+      if (!scrollContainer) return
+
+      // Use a timeout to scroll after the DOM updates
+      const timeoutId = setTimeout(() => {
+        // Scroll the container to the bottom, not the entire browser
+        scrollContainer.scrollTop = scrollContainer.scrollHeight
+      }, 10)
+
+      return () => clearTimeout(timeoutId)
+    }, [messages.length])
+
+    const formatTimestamp = (timestamp: Date) => {
+      return timestamp.toLocaleTimeString("en-US", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+    }
+
+    const getMessageColor = (level: LogLevel) => {
+      switch (level) {
+        case "error":
+          return theme.palette.error.main
+        case "warning":
+          return theme.palette.warning.main
+        case "info":
+        default:
+          return theme.palette.text.secondary
+      }
+    }
+
+    // Component for individual log messages with expand/copy functionality
+    const LogMessage = ({ message }: { message: LogMessage }) => {
+      const [isExpanded, setIsExpanded] = useState(false)
+      const [copyTooltip, setCopyTooltip] = useState(false)
+      const [isHovered, setIsHovered] = useState(false)
+      const isLongMessage = message.message.length > 150
+
+      const handleCopy = async () => {
+        try {
+          await navigator.clipboard.writeText(message.message)
+          setCopyTooltip(true)
+          setTimeout(() => setCopyTooltip(false), 2000)
+        } catch (err) {
+          console.error("Failed to copy message:", err)
+        }
+      }
+
+      const displayMessage =
+        isLongMessage && !isExpanded
+          ? message.message.substring(0, 150) + "..."
+          : message.message
+
+      return (
+        <Box
+          key={message.id}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          sx={{
+            display: "flex",
+            gap: 1,
+            fontFamily: "monospace",
+            flexDirection: "column",
+            "&:hover": {
+              backgroundColor: theme.palette.action.hover,
+            },
+            borderRadius: "4px",
+            padding: "2px 4px",
+            margin: "-2px -4px",
+          }}
+        >
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {/* Timestamp */}
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 400,
+                fontSize: "12px",
+                lineHeight: "18px",
+                letterSpacing: "0.4px",
+                color: theme.palette.text.disabled,
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+              }}
+            >
+              [{formatTimestamp(message.timestamp)}]
+            </Typography>
+
+            {/* Message */}
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 400,
+                fontSize: "12px",
+                lineHeight: "18px",
+                letterSpacing: "0.4px",
+                color: getMessageColor(message.level),
+                wordBreak: "break-word",
+                overflowWrap: "anywhere",
+                hyphens: "auto",
+                flex: 1,
+                whiteSpace: "pre-wrap",
+              }}
+            >
+              {displayMessage}
+            </Typography>
+
+            {/* Action buttons - only visible on hover */}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 0.5,
+                opacity: isHovered ? 1 : 0,
+                transition: "opacity 0.2s ease-in-out",
+                visibility: isHovered ? "visible" : "hidden",
+              }}
+            >
+              <IconButton
+                size="small"
+                onClick={handleCopy}
+                sx={{
+                  padding: "2px",
+                  color: theme.palette.text.secondary,
+                  "&:hover": {
+                    backgroundColor: theme.palette.action.hover,
+                  },
+                }}
+                title={copyTooltip ? "Copied!" : "Copy message"}
+              >
+                <ContentCopy sx={{ fontSize: 12 }} />
+              </IconButton>
+
+              {isLongMessage && (
+                <IconButton
+                  size="small"
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  sx={{
+                    padding: "2px",
+                    color: theme.palette.text.secondary,
+                    "&:hover": {
+                      backgroundColor: theme.palette.action.hover,
+                    },
+                  }}
+                  title={isExpanded ? "Collapse" : "Expand"}
+                >
+                  {isExpanded ? (
+                    <ExpandLess sx={{ fontSize: 12 }} />
+                  ) : (
+                    <ExpandMore sx={{ fontSize: 12 }} />
+                  )}
+                </IconButton>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      )
+    }
+
+    return (
+      <Paper
+        sx={{
+          backgroundColor:
+            theme.palette.backgroundPaperElevation?.[2] || "#171927",
+          backgroundImage: "none", // Override any gradient from elevation
+          height,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          ...sx,
+        }}
+      >
+        {/* Header */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 16px",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <DocumentIcon
+              sx={{
+                fontSize: 16,
+                color: theme.palette.action.active,
+                opacity: 0.56,
+              }}
+            />
+            <Typography
+              sx={{
+                fontWeight: 500,
+                fontSize: "14px",
+                lineHeight: "143%",
+                letterSpacing: "0.17px",
+                color: theme.palette.text.primary,
+              }}
+            >
+              Log
+            </Typography>
+          </Box>
+          <Button
+            onClick={onClear}
+            variant="text"
+            sx={{
+              fontWeight: 500,
+              fontSize: "13px",
+              lineHeight: "22px",
+              letterSpacing: "0.46px",
+              color: theme.palette.primary.main,
+              textTransform: "none",
+              minWidth: "auto",
+              padding: "4px 8px",
+              "&:hover": {
+                backgroundColor: theme.palette.primary.main + "14", // 8% opacity
+              },
+            }}
+          >
+            Clear
+          </Button>
+        </Box>
+
+        {/* Messages Container */}
+        <Box
+          ref={scrollContainerRef}
+          sx={{
+            flex: 1,
+            overflow: "auto",
+            padding: "8px 16px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "2px",
+          }}
+        >
+          {messages.length === 0 ? (
+            <Typography
+              sx={{
+                color: theme.palette.text.disabled,
+                fontSize: "12px",
+                fontStyle: "italic",
+                textAlign: "center",
+                marginTop: 2,
+              }}
+            >
+              No log messages
+            </Typography>
+          ) : (
+            messages.map((message) => (
+              <LogMessage key={message.id} message={message} />
+            ))
+          )}
+        </Box>
+      </Paper>
+    )
+  }),
+)

package/src/components/ProgramControl.tsx

@@ -4,7 +4,12 @@ import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
 
-export type ProgramState = "idle" | "running" | "paused" | "stopping"
+export enum ProgramState {
+  IDLE = "idle",
+  RUNNING = "running",
+  PAUSED = "paused",
+  STOPPING = "stopping",
+}
 
 export interface ProgramControlProps {
   /** The current state of the program control */
@@ -70,22 +75,24 @@ export const ProgramControl = externalizeComponent(
       const getButtonConfigs = (): ButtonConfig[] => {
         const baseConfigs: Record<string, ButtonConfig> = {
           run: {
-            enabled: state === "idle" || state === "paused",
+            enabled:
+              state === ProgramState.IDLE || state === ProgramState.PAUSED,
             label:
-              state === "paused"
+              state === ProgramState.PAUSED
                 ? t("ProgramControl.Resume.bt")
                 : t("ProgramControl.Start.bt"),
             color: theme.palette.success.main,
             onClick: onRun,
           },
           pause: {
-            enabled: state === "running",
+            enabled: state === ProgramState.RUNNING,
             label: t("ProgramControl.Pause.bt"),
             color: "#FFFFFF33",
             onClick: onPause || (() => {}),
           },
           stop: {
-            enabled: state === "running" || state === "paused",
+            enabled:
+              state === ProgramState.RUNNING || state === ProgramState.PAUSED,
             label: t("ProgramControl.Stop.bt"),
             color: theme.palette.error.main,
             onClick: onStop,
@@ -157,7 +164,7 @@ export const ProgramControl = externalizeComponent(
                   variant="contained"
                   disabled={
                     !config.enabled ||
-                    (state === "stopping" && !requiresManualReset)
+                    (state === ProgramState.STOPPING && !requiresManualReset)
                   }
                   onClick={config.onClick}
                   sx={{
@@ -167,14 +174,17 @@ export const ProgramControl = externalizeComponent(
                     backgroundColor: config.color,
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                     "&:hover": {
                       backgroundColor: config.color,
                       opacity:
                         config.enabled &&
-                        !(state === "stopping" && !requiresManualReset)
+                        !(
+                          state === ProgramState.STOPPING &&
+                          !requiresManualReset
+                        )
                           ? 0.8
                           : 0.3,
                     },
@@ -194,13 +204,13 @@ export const ProgramControl = externalizeComponent(
                   sx={{
                     color:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? config.color
                         : theme.palette.text.disabled,
                     textAlign: "center",
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                   }}

package/src/components/ProgramStateIndicator.tsx

@@ -1,4 +1,4 @@
-import { Chip, useTheme } from "@mui/material"
+import { Chip, Typography, useTheme } from "@mui/material"
 import type {
   RobotControllerStateOperationModeEnum,
   RobotControllerStateSafetyStateEnum,
@@ -6,7 +6,7 @@ import type {
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
-import type { ProgramState } from "./ProgramControl"
+import { ProgramState } from "./ProgramControl"
 
 export interface ProgramStateIndicatorProps {
   /** The current state of the program */
@@ -77,22 +77,22 @@ export const ProgramStateIndicator = externalizeComponent(
         // For normal safety states, check program state
         if (safetyState === "SAFETY_STATE_NORMAL") {
           switch (programState) {
-            case "running":
+            case ProgramState.RUNNING:
               return {
                 label: t("ProgramStateIndicator.Running.lb"),
                 color: theme.palette.success.main,
               }
-            case "paused":
+            case ProgramState.PAUSED:
               return {
                 label: t("ProgramStateIndicator.Paused.lb"),
                 color: theme.palette.grey[600],
               }
-            case "stopping":
+            case ProgramState.STOPPING:
               return {
                 label: t("ProgramStateIndicator.Stopped.lb"),
                 color: theme.palette.error.main,
               }
-            case "idle":
+            case ProgramState.IDLE:
             default:
               return {
                 label: t("ProgramStateIndicator.Ready.lb"),
@@ -131,14 +131,26 @@ export const ProgramStateIndicator = externalizeComponent(
       return (
         <Chip
           className={className}
-          label={fullLabel}
+          label={
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "0.75rem", // Smaller than body2
+                lineHeight: 1.2,
+              }}
+            >
+              {fullLabel}
+            </Typography>
+          }
           variant="filled"
           sx={{
             backgroundColor: color,
             color: theme.palette.getContrastText(color),
             fontWeight: 500,
+            height: "auto",
             "& .MuiChip-label": {
-              paddingX: 2,
+              paddingX: 1.5,
+              paddingY: 0.5,
             },
           }}
         />