@canmingir/link 1.2.55 → 1.2.57

package/src/lib/ChatMessage/ErrorMessage.tsx

@@ -0,0 +1,63 @@
+import { Iconify } from "@canmingir/link/platform/components";
+import { alpha } from "@mui/material/styles";
+
+import { Box, IconButton, Stack } from "@mui/material";
+import React, { memo } from "react";
+
+const ErrorMessage: React.FC<{
+  content: string;
+  messageRef?: React.RefObject<HTMLDivElement>;
+  onClose?: () => void;
+}> = memo(({ content, messageRef, onClose }) => (
+  <Stack
+    ref={messageRef}
+    sx={{
+      p: 2.5,
+      alignContent: "flex-start",
+      justifyContent: "flex-start",
+      backgroundColor: (theme) => alpha(theme.palette.error.dark, 0.2),
+      borderRadius: 2,
+      height: "auto",
+      mt: 1.5,
+      boxShadow: 1,
+      border: (theme) => `1px solid ${alpha(theme.palette.error.light, 0.4)}`,
+    }}
+  >
+    <Stack direction="row" spacing={1} alignItems="center">
+      <Iconify
+        icon="solar:danger-triangle-bold"
+        sx={{
+          width: 20,
+          height: 20,
+          color: (theme) => theme.palette.error.main,
+        }}
+      />
+      <Box
+        sx={{
+          width: "100%",
+          color: (theme) => theme.palette.error.light,
+          fontSize: "0.95rem",
+          lineHeight: 1.6,
+        }}
+      >
+        {content}
+      </Box>
+      {onClose && (
+        <IconButton
+          onClick={onClose}
+          size="small"
+          sx={{
+            color: (theme) => theme.palette.error.light,
+            "&:hover": {
+              backgroundColor: (theme) => alpha(theme.palette.error.main, 0.1),
+            },
+          }}
+        >
+          <Iconify icon="mdi:close" sx={{ width: 18, height: 18 }} />
+        </IconButton>
+      )}
+    </Stack>
+  </Stack>
+));
+
+export { ErrorMessage };

package/src/lib/ChatMessage/HumanMessage.tsx

@@ -0,0 +1,142 @@
+import Editor from "@monaco-editor/react";
+import { alpha } from "@mui/material/styles";
+import { Box, Stack, Typography } from "@mui/material";
+
+import { memo, useMemo } from "react";
+
+function tryParseJson(content: string): boolean {
+  const trimmed = content.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return false;
+  try {
+    JSON.parse(trimmed);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const HumanMessage = memo(
+  ({
+    message,
+    selectedId,
+    messageRef,
+  }: {
+    message: { id: string; content: string };
+    selectedId: string;
+    messageRef: React.RefObject<HTMLDivElement>;
+  }) => {
+    const isJson = useMemo(
+      () => tryParseJson(message.content),
+      [message.content]
+    );
+
+    const formattedJson = useMemo(() => {
+      if (!isJson) return null;
+      try {
+        return JSON.stringify(JSON.parse(message.content), null, 2);
+      } catch {
+        return null;
+      }
+    }, [isJson, message.content]);
+
+    const editorHeight = useMemo(() => {
+      if (!formattedJson) return 0;
+      const lines = formattedJson.split("\n").length;
+      return Math.min(Math.max(lines * 19 + 24, 60), 200);
+    }, [formattedJson]);
+
+    return (
+      <Stack
+        ref={messageRef}
+        sx={{
+          p: isJson ? 1.5 : 2.5,
+          minHeight: "auto",
+          mt: 1.5,
+          ml: isJson ? 0 : "auto",
+          maxWidth: isJson ? "100%" : "85%",
+          alignContent: "center",
+          justifyContent: "center",
+          borderWidth: message?.id === selectedId ? 3 : 0,
+          borderRadius: isJson ? 2 : "16px 16px 4px 16px",
+          borderStyle: "none",
+          borderColor: "transparent",
+          backgroundColor: (theme) =>
+            isJson
+              ? alpha(theme.palette.grey[800], 0.5)
+              : alpha(theme.palette.grey[700], 0.4),
+          animation: "none",
+          boxShadow: 1,
+        }}
+      >
+        {isJson ? (
+          <Box>
+            <Typography
+              variant="caption"
+              sx={{
+                display: "block",
+                mb: 0.75,
+                color: (theme) => alpha(theme.palette.text.secondary, 0.6),
+                fontSize: "0.68rem",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+              }}
+            >
+              JSON Request
+            </Typography>
+            <Box
+              sx={{
+                border: (theme) =>
+                  `1px solid ${alpha(theme.palette.grey[500], 0.2)}`,
+                borderRadius: 1,
+                overflow: "hidden",
+                bgcolor: "#1e1e1e",
+              }}
+            >
+              <Editor
+                height={`${editorHeight}px`}
+                defaultLanguage="json"
+                value={formattedJson}
+                theme="vs-dark"
+                options={{
+                  readOnly: true,
+                  minimap: { enabled: false },
+                  fontSize: 12,
+                  lineNumbers: "off",
+                  scrollBeyondLastLine: false,
+                  wordWrap: "on",
+                  tabSize: 2,
+                  folding: false,
+                  glyphMargin: false,
+                  lineDecorationsWidth: 0,
+                  lineNumbersMinChars: 0,
+                  padding: { top: 8, bottom: 8 },
+                  scrollbar: { vertical: "hidden", horizontal: "hidden" },
+                  renderLineHighlight: "none",
+                  selectionHighlight: false,
+                  occurrencesHighlight: "off",
+                  contextmenu: false,
+                  domReadOnly: true,
+                }}
+              />
+            </Box>
+          </Box>
+        ) : (
+          <Typography
+            variant="body1"
+            textAlign="end"
+            sx={{
+              fontSize: "0.95rem",
+              lineHeight: 1.6,
+              wordWrap: "break-word",
+            }}
+          >
+            {message.content}
+          </Typography>
+        )}
+      </Stack>
+    );
+  }
+);
+
+export { HumanMessage };

package/src/lib/ChatMessage/LoadingMessage.tsx

@@ -0,0 +1,27 @@
+import { Iconify } from "@canmingir/link/platform/components";
+import { Stack } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import { memo } from "react";
+
+const LoadingMessage = memo(
+  ({
+    messagesEndRef,
+  }: {
+    messagesEndRef: { current: HTMLDivElement | null };
+  }) => (
+    <Stack
+      ref={messagesEndRef}
+      sx={{
+        p: 2,
+        height: 50,
+        backgroundColor: (theme) => alpha(theme.palette.primary.dark, 0.5),
+        borderRadius: 1,
+        mt: 1,
+      }}
+    >
+      <Iconify icon="svg-spinners:tadpole" sx={{ width: 25, height: 25 }} />
+    </Stack>
+  )
+);
+
+export { LoadingMessage };

package/src/lib/ChatMessage/MessageList.tsx

@@ -0,0 +1,81 @@
+import { AIMessage } from "./AIMessage";
+import { ErrorMessage } from "./ErrorMessage";
+import { HumanMessage } from "./HumanMessage";
+import { ToolDecision, ToolMessage, ToolRenderers } from "./ToolMessage";
+
+import React, { memo } from "react";
+
+const MessageList = memo(
+  ({
+    error,
+    messages,
+    selectedId,
+    messagesEndRef,
+    highlightedMessage,
+    onErrorClose,
+    toolRenderers,
+    onToolDecision,
+  }: {
+    error?: string;
+    messages: { id: string; content: string; role: string }[];
+    selectedId: string;
+    messagesEndRef: { current: HTMLDivElement | null };
+    highlightedMessage: { current: HTMLDivElement | null };
+    onErrorClose?: () => void;
+    toolRenderers?: ToolRenderers;
+    onToolDecision?: (toolCallId: string, decision: ToolDecision) => void;
+  }) => (
+    <>
+      {messages.map((item, index) => {
+        const isLastMessage = index === messages.length - 1;
+        const isSelected = item.id === selectedId;
+
+        if (item.role === "USER") {
+          return (
+            <HumanMessage
+              key={item.id || index}
+              message={item}
+              selectedId={selectedId}
+              messageRef={
+                isSelected
+                  ? highlightedMessage
+                  : isLastMessage
+                  ? messagesEndRef
+                  : undefined
+              }
+            />
+          );
+        }
+
+        if (item.role === "TOOL") {
+          return (
+            <ToolMessage
+              key={item.id || index}
+              content={item.content}
+              messageRef={isLastMessage ? messagesEndRef : undefined}
+              renderers={toolRenderers}
+              onDecision={onToolDecision}
+            />
+          );
+        }
+
+        return (
+          <AIMessage
+            key={item.id || index}
+            content={item.content}
+            messageRef={isLastMessage ? messagesEndRef : undefined}
+          />
+        );
+      })}
+      {error && (
+        <ErrorMessage
+          key="error-message"
+          content={error}
+          onClose={onErrorClose}
+        />
+      )}
+    </>
+  )
+);
+
+export { MessageList };

package/src/lib/ChatMessage/ToolMessage.tsx

@@ -0,0 +1,346 @@
+import { Iconify } from "@canmingir/link/platform/components";
+import { alpha } from "@mui/material/styles";
+
+import { Box, Button, Collapse, Stack, Typography } from "@mui/material";
+import React, { memo, useMemo, useState } from "react";
+
+export type ToolStatus =
+  | "awaiting_approval"
+  | "pending"
+  | "success"
+  | "error"
+  | "declined";
+
+export type ToolDecision = "approve" | "decline" | "approve_all";
+
+export interface ToolMessageContent {
+  id: string;
+  name: string;
+  input?: Record<string, unknown>;
+  output?: string;
+  status: ToolStatus;
+}
+
+export interface ToolRendererProps {
+  name: string;
+  input?: Record<string, unknown>;
+  output?: string;
+  status: ToolStatus;
+}
+
+export type ToolRenderers = Record<
+  string,
+  React.ComponentType<ToolRendererProps>
+>;
+
+function formatLabel(name: string): string {
+  return name
+    .split("_")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.length ? value.map(formatValue).join(", ") : "—";
+  }
+  if (typeof value === "object") {
+    return Object.entries(value as Record<string, unknown>)
+      .map(([key, val]) => `${formatLabel(key)}: ${formatValue(val)}`)
+      .join(", ");
+  }
+  return String(value);
+}
+
+function statusIcon(status: ToolStatus): string {
+  if (status === "success") return "solar:check-circle-bold";
+  if (status === "error") return "solar:close-circle-bold";
+  if (status === "declined") return "solar:forbidden-circle-bold";
+  if (status === "awaiting_approval") return "solar:shield-warning-bold";
+  return "svg-spinners:tadpole";
+}
+
+function statusColor(
+  status: ToolStatus
+): "success.main" | "error.main" | "warning.main" | "text.secondary" {
+  if (status === "success") return "success.main";
+  if (status === "error") return "error.main";
+  if (status === "awaiting_approval") return "warning.main";
+  return "text.secondary";
+}
+
+function FieldRow({ label, value }: { label: string; value: unknown }) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ py: 0.4 }}>
+      <Typography
+        sx={{
+          fontSize: "0.72rem",
+          fontWeight: 600,
+          color: "text.secondary",
+          minWidth: 90,
+          flexShrink: 0,
+        }}
+      >
+        {label}
+      </Typography>
+      <Typography sx={{ fontSize: "0.78rem", wordBreak: "break-word" }}>
+        {formatValue(value)}
+      </Typography>
+    </Stack>
+  );
+}
+
+function FieldList({ data }: { data: Record<string, unknown> }) {
+  const entries = Object.entries(data);
+  if (!entries.length) {
+    return (
+      <Typography sx={{ fontSize: "0.78rem", color: "text.secondary" }}>
+        No fields
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack>
+      {entries.map(([key, value]) => (
+        <FieldRow key={key} label={formatLabel(key)} value={value} />
+      ))}
+    </Stack>
+  );
+}
+
+function ResultView({ output }: { output: string }) {
+  const parsed = useMemo(() => {
+    try {
+      return JSON.parse(output);
+    } catch {
+      return undefined;
+    }
+  }, [output]);
+
+  if (parsed === undefined) {
+    return (
+      <Typography sx={{ fontSize: "0.78rem", whiteSpace: "pre-wrap" }}>
+        {output}
+      </Typography>
+    );
+  }
+
+  if (Array.isArray(parsed)) {
+    if (!parsed.length) {
+      return (
+        <Typography sx={{ fontSize: "0.78rem", color: "text.secondary" }}>
+          Empty result
+        </Typography>
+      );
+    }
+
+    return (
+      <Stack spacing={1}>
+        {parsed.map((item, index) =>
+          item && typeof item === "object" ? (
+            <Box
+              key={index}
+              sx={{
+                pl: 1,
+                borderLeft: (theme) =>
+                  `2px solid ${alpha(theme.palette.grey[500], 0.3)}`,
+              }}
+            >
+              <FieldList data={item as Record<string, unknown>} />
+            </Box>
+          ) : (
+            <Typography key={index} sx={{ fontSize: "0.78rem" }}>
+              {formatValue(item)}
+            </Typography>
+          )
+        )}
+      </Stack>
+    );
+  }
+
+  if (parsed && typeof parsed === "object") {
+    return <FieldList data={parsed as Record<string, unknown>} />;
+  }
+
+  return (
+    <Typography sx={{ fontSize: "0.78rem" }}>{formatValue(parsed)}</Typography>
+  );
+}
+
+function ApprovalActions({
+  toolCallId,
+  onDecision,
+}: {
+  toolCallId: string;
+  onDecision: (toolCallId: string, decision: ToolDecision) => void;
+}) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+      <Button
+        size="small"
+        variant="contained"
+        color="success"
+        onClick={() => onDecision(toolCallId, "approve")}
+        sx={{ fontSize: "0.7rem", py: 0.25 }}
+      >
+        Approve
+      </Button>
+      <Button
+        size="small"
+        variant="outlined"
+        color="error"
+        onClick={() => onDecision(toolCallId, "decline")}
+        sx={{ fontSize: "0.7rem", py: 0.25 }}
+      >
+        Decline
+      </Button>
+      <Button
+        size="small"
+        variant="text"
+        onClick={() => onDecision(toolCallId, "approve_all")}
+        sx={{ fontSize: "0.7rem", py: 0.25 }}
+      >
+        Approve All
+      </Button>
+    </Stack>
+  );
+}
+
+const ToolMessage: React.FC<{
+  content: string;
+  messageRef?: React.RefObject<HTMLDivElement>;
+  renderers?: ToolRenderers;
+  onDecision?: (toolCallId: string, decision: ToolDecision) => void;
+}> = memo(({ content, messageRef, renderers, onDecision }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const tool = useMemo<ToolMessageContent | null>(() => {
+    try {
+      const parsed = JSON.parse(content);
+      if (parsed && typeof parsed.name === "string") return parsed;
+      return null;
+    } catch {
+      return null;
+    }
+  }, [content]);
+
+  if (!tool) return null;
+
+  const CustomBody = renderers?.[tool.name];
+  const awaitingApproval = tool.status === "awaiting_approval";
+  const alwaysShowBody = CustomBody || awaitingApproval;
+
+  return (
+    <Stack
+      ref={messageRef}
+      sx={{
+        p: 1.5,
+        mt: 1.5,
+        borderRadius: 2,
+        backgroundColor: (theme) => alpha(theme.palette.grey[800], 0.4),
+        border: (theme) =>
+          `1px solid ${alpha(
+            awaitingApproval ? theme.palette.warning.main : theme.palette.grey[500],
+            awaitingApproval ? 0.4 : 0.2
+          )}`,
+      }}
+    >
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        onClick={alwaysShowBody ? undefined : () => setExpanded((e) => !e)}
+        sx={{ cursor: alwaysShowBody ? "default" : "pointer" }}
+      >
+        <Iconify
+          icon="solar:widget-bold-duotone"
+          sx={{ width: 18, height: 18, color: "text.secondary" }}
+        />
+        <Typography sx={{ fontSize: "0.8rem", fontWeight: 600, flex: 1 }}>
+          {formatLabel(tool.name)}
+        </Typography>
+        <Iconify
+          icon={statusIcon(tool.status)}
+          sx={{ width: 16, height: 16, color: statusColor(tool.status) }}
+        />
+        {!alwaysShowBody && (
+          <Iconify
+            icon={expanded ? "mdi:chevron-up" : "mdi:chevron-down"}
+            sx={{ width: 16, height: 16, color: "text.secondary" }}
+          />
+        )}
+      </Stack>
+
+      {CustomBody ? (
+        <Box sx={{ mt: 1 }}>
+          <CustomBody
+            name={tool.name}
+            input={tool.input}
+            output={tool.output}
+            status={tool.status}
+          />
+        </Box>
+      ) : awaitingApproval ? (
+        <Box sx={{ mt: 1 }}>
+          {tool.input && <FieldList data={tool.input} />}
+        </Box>
+      ) : (
+        <Collapse in={expanded}>
+          <Box sx={{ mt: 1 }}>
+            {tool.input && (
+              <>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    display: "block",
+                    color: (theme) => alpha(theme.palette.text.secondary, 0.7),
+                    fontSize: "0.65rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                  }}
+                >
+                  Arguments
+                </Typography>
+                <FieldList data={tool.input} />
+              </>
+            )}
+
+            {tool.output !== undefined && (
+              <>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    display: "block",
+                    mt: 1,
+                    color: (theme) => alpha(theme.palette.text.secondary, 0.7),
+                    fontSize: "0.65rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                  }}
+                >
+                  Result
+                </Typography>
+                <ResultView output={tool.output} />
+              </>
+            )}
+          </Box>
+        </Collapse>
+      )}
+
+      {awaitingApproval && onDecision && (
+        <ApprovalActions toolCallId={tool.id} onDecision={onDecision} />
+      )}
+    </Stack>
+  );
+});
+
+export { ToolMessage };

package/src/lib/ChatMessage/index.js

@@ -0,0 +1,6 @@
+export { AIMessage } from "./AIMessage";
+export { ErrorMessage } from "./ErrorMessage";
+export { HumanMessage } from "./HumanMessage";
+export { LoadingMessage } from "./LoadingMessage";
+export { MessageList } from "./MessageList";
+export { ToolMessage } from "./ToolMessage";

package/src/lib/Image/utils.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function getRatio(ratio = "1/1") {
   return {
     "4/3": "calc(100% / 4 * 3)",