@wandelbots/wandelbots-js-react-components 2.32.0-pr.feature-robot-precondition-list.372.8bd8d01 → 2.33.0-pr.feature-robot-precondition-list.372.cb78a22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.32.0-pr.feature-robot-precondition-list.372.8bd8d01",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.cb78a22",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/LogPanel.tsx

@@ -0,0 +1,85 @@
+import type { SxProps } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useEffect, useMemo, useRef } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+import { LogStore } from "./LogStore"
+import { LogViewer } from "./LogViewer"
+
+export type LogPanelProps = {
+  /** Log store instance to use, or create one automatically if not provided */
+  store?: LogStore
+  /** Height of the component */
+  height?: string | number
+  /** Additional styles */
+  sx?: SxProps
+  /** Ref to the log store for external access */
+  onStoreReady?: (store: LogStore) => void
+}
+
+/**
+ * A complete log panel component with built-in state management.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with automatic state management
+ * function MyComponent() {
+ *   const [logStore, setLogStore] = useState<LogStore>()
+ *
+ *   return (
+ *     <LogPanel
+ *       height={400}
+ *       onStoreReady={setLogStore}
+ *     />
+ *   )
+ * }
+ *
+ * // Then use the store to add messages
+ * logStore?.addInfo("Operation completed successfully")
+ * logStore?.addError("Something went wrong")
+ * logStore?.addWarning("Warning message")
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with external store for shared state
+ * function MyApp() {
+ *   const logStore = useMemo(() => new LogStore(), [])
+ *
+ *   return (
+ *     <div>
+ *       <LogPanel store={logStore} height={300} />
+ *       <SomeOtherComponent onError={(msg) => logStore.addError(msg)} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export const LogPanel = externalizeComponent(
+  observer((props: LogPanelProps) => {
+    const { store: externalStore, onStoreReady, ...logViewerProps } = props
+    const onStoreReadyRef = useRef(onStoreReady)
+
+    // Update ref when callback changes
+    useEffect(() => {
+      onStoreReadyRef.current = onStoreReady
+    }, [onStoreReady])
+
+    const store = useMemo(() => {
+      const logStore = externalStore || new LogStore()
+      onStoreReadyRef.current?.(logStore)
+      return logStore
+    }, [externalStore])
+
+    const handleClear = () => {
+      store.clearMessages()
+    }
+
+    return (
+      <LogViewer
+        {...logViewerProps}
+        messages={store.messages}
+        onClear={handleClear}
+      />
+    )
+  }),
+)

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,297 @@
+import {
+  ContentCopy,
+  DescriptionOutlined as DocumentIcon,
+  ExpandLess,
+  ExpandMore,
+} from "@mui/icons-material"
+import type { SxProps } from "@mui/material"
+import { Box, Button, IconButton, Paper, Typography } 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 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 "var(--error-main, #EF5350)"
+        case "warning":
+          return "var(--warning-main, #FF9800)"
+        case "info":
+        default:
+          return "var(--text-secondary, #FFFFFFB2)"
+      }
+    }
+
+    // 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: "rgba(255, 255, 255, 0.03)",
+            },
+            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: "var(--text-disabled, #FFFFFF61)",
+                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: "var(--text-secondary, #FFFFFFB2)",
+                  "&:hover": {
+                    backgroundColor: "rgba(255, 255, 255, 0.08)",
+                  },
+                }}
+                title={copyTooltip ? "Copied!" : "Copy message"}
+              >
+                <ContentCopy sx={{ fontSize: 12 }} />
+              </IconButton>
+
+              {isLongMessage && (
+                <IconButton
+                  size="small"
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  sx={{
+                    padding: "2px",
+                    color: "var(--text-secondary, #FFFFFFB2)",
+                    "&:hover": {
+                      backgroundColor: "rgba(255, 255, 255, 0.08)",
+                    },
+                  }}
+                  title={isExpanded ? "Collapse" : "Expand"}
+                >
+                  {isExpanded ? (
+                    <ExpandLess sx={{ fontSize: 12 }} />
+                  ) : (
+                    <ExpandMore sx={{ fontSize: 12 }} />
+                  )}
+                </IconButton>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      )
+    }
+
+    return (
+      <Paper
+        sx={{
+          background: "var(--background-paper-elevation-2, #171927)",
+          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: "var(--text-secondary, #FFFFFFB2)" }}
+            />
+            <Typography
+              sx={{
+                fontWeight: 500,
+                fontSize: "14px",
+                lineHeight: "143%",
+                letterSpacing: "0.17px",
+                color: "var(--text-primary, #FFFFFF)",
+              }}
+            >
+              Log
+            </Typography>
+          </Box>
+          <Button
+            onClick={onClear}
+            variant="text"
+            sx={{
+              fontWeight: 500,
+              fontSize: "13px",
+              lineHeight: "22px",
+              letterSpacing: "0.46px",
+              color: "var(--primary-main, #8E56FC)",
+              textTransform: "none",
+              minWidth: "auto",
+              padding: "4px 8px",
+              "&:hover": {
+                backgroundColor: "rgba(142, 86, 252, 0.08)",
+              },
+            }}
+          >
+            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: "var(--text-disabled, #FFFFFF61)",
+                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/index.ts

@@ -10,6 +10,9 @@ export { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/PoseCartesianValues"
 export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
+export * from "./components/LogPanel"
+export { LogStore } from "./components/LogStore"
+export * from "./components/LogViewer"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/ProgramControl"
 export * from "./components/ProgramStateIndicator"