@optilogic/chat 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/index.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var React = require('react');
+var React7 = require('react');
 var core = require('@optilogic/core');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
+var editor = require('@optilogic/editor');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,10 +24,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 
 // src/components/agent-response/AgentResponse.tsx
-var ActivityIndicators = React__namespace.forwardRef(
+var ActivityIndicators = React7__namespace.forwardRef(
   ({ toolCalls, knowledge, memory, className, ...props }, ref) => {
     const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
     if (!hasAnyActivity) return null;
@@ -125,7 +126,7 @@ function formatTotalTime(seconds) {
   const minutes = seconds / 60;
   return `${minutes.toFixed(1)}m`;
 }
-var MetadataRow = React__namespace.forwardRef(
+var MetadataRow = React7__namespace.forwardRef(
   ({
     hasThinking,
     isExpanded,
@@ -189,7 +190,7 @@ var MetadataRow = React__namespace.forwardRef(
   }
 );
 MetadataRow.displayName = "MetadataRow";
-var ThinkingSection = React__namespace.forwardRef(
+var ThinkingSection = React7__namespace.forwardRef(
   ({ content, isExpanded, className, ...props }, ref) => {
     if (!isExpanded || !content) {
       return null;
@@ -206,7 +207,7 @@ var ThinkingSection = React__namespace.forwardRef(
   }
 );
 ThinkingSection.displayName = "ThinkingSection";
-var ActionBar = React__namespace.forwardRef(
+var ActionBar = React7__namespace.forwardRef(
   ({
     response,
     isVisible,
@@ -217,8 +218,8 @@ var ActionBar = React__namespace.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [copied, setCopied] = React.useState(false);
-    const handleCopy = React.useCallback(async () => {
+    const [copied, setCopied] = React7.useState(false);
+    const handleCopy = React7.useCallback(async () => {
       try {
         await navigator.clipboard.writeText(response);
         setCopied(true);
@@ -228,11 +229,11 @@ var ActionBar = React__namespace.forwardRef(
         console.error("Failed to copy response:", err);
       }
     }, [response, onResponseCopy]);
-    const handleThumbsUp = React.useCallback(() => {
+    const handleThumbsUp = React7.useCallback(() => {
       const newValue = feedback === "up" ? null : "up";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
-    const handleThumbsDown = React.useCallback(() => {
+    const handleThumbsDown = React7.useCallback(() => {
       const newValue = feedback === "down" ? null : "down";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
@@ -300,8 +301,8 @@ function useThinkingTimer({
   endTime,
   status
 }) {
-  const [elapsed, setElapsed] = React.useState(0);
-  React.useEffect(() => {
+  const [elapsed, setElapsed] = React7.useState(0);
+  React7.useEffect(() => {
     if (!startTime) {
       setElapsed(0);
       return;
@@ -337,9 +338,9 @@ var initialAgentResponseState = {
 
 // src/components/agent-response/hooks/useAgentResponseAccumulator.ts
 function useAgentResponseAccumulator(options) {
-  const [state, setState] = React.useState(initialAgentResponseState);
+  const [state, setState] = React7.useState(initialAgentResponseState);
   const topic = options?.topic;
-  const handleMessage = React.useCallback(
+  const handleMessage = React7.useCallback(
     (message) => {
       let payload;
       if (topic) {
@@ -443,12 +444,12 @@ function useAgentResponseAccumulator(options) {
     },
     [topic]
   );
-  const reset = React.useCallback(() => {
+  const reset = React7.useCallback(() => {
     setState(initialAgentResponseState);
   }, []);
   return { state, handleMessage, reset };
 }
-var AgentResponse = React__namespace.forwardRef(
+var AgentResponse = React7__namespace.forwardRef(
   ({
     state,
     id,
@@ -464,10 +465,10 @@ var AgentResponse = React__namespace.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultThinkingExpanded);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React7.useState(defaultThinkingExpanded);
     const isThinkingControlled = controlledThinkingExpanded !== void 0;
     const thinkingExpanded = isThinkingControlled ? controlledThinkingExpanded : uncontrolledExpanded;
-    const toggleThinking = React.useCallback(() => {
+    const toggleThinking = React7.useCallback(() => {
       const newValue = !thinkingExpanded;
       if (isThinkingControlled) {
         onThinkingExpandedChange?.(newValue);
@@ -475,13 +476,13 @@ var AgentResponse = React__namespace.forwardRef(
         setUncontrolledExpanded(newValue);
       }
     }, [thinkingExpanded, isThinkingControlled, onThinkingExpandedChange]);
-    const [isHovered, setIsHovered] = React.useState(false);
+    const [isHovered, setIsHovered] = React7.useState(false);
     const elapsedTime = useThinkingTimer({
       startTime: state.thinkingStartTime,
       endTime: state.responseCompleteTime,
       status: state.status
     });
-    const totalTimeSeconds = React.useMemo(() => {
+    const totalTimeSeconds = React7.useMemo(() => {
       if (!state.firstMessageTime || !state.responseCompleteTime) return 0;
       return (state.responseCompleteTime - state.firstMessageTime) / 1e3;
     }, [state.firstMessageTime, state.responseCompleteTime]);
@@ -552,12 +553,223 @@ var AgentResponse = React__namespace.forwardRef(
   }
 );
 AgentResponse.displayName = "AgentResponse";
+var UserPrompt = React7__namespace.forwardRef(
+  ({ content, timestamp, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: core.cn(
+          "w-fit max-w-[80%] rounded-lg px-4 pt-3.5 pb-3",
+          "bg-secondary text-secondary-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: content }),
+          timestamp && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-secondary-foreground/70 mt-1", children: timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+          }) })
+        ]
+      }
+    );
+  }
+);
+UserPrompt.displayName = "UserPrompt";
+function createCodeBlockDecorate(entry) {
+  const [node, path] = entry;
+  const ranges = [];
+  if (!editor.Text.isText(node)) {
+    return ranges;
+  }
+  const { text } = node;
+  const backtickPositions = [];
+  let searchStart = 0;
+  while (true) {
+    const pos = text.indexOf("```", searchStart);
+    if (pos === -1) break;
+    backtickPositions.push(pos);
+    searchStart = pos + 3;
+  }
+  let i = 0;
+  while (i < backtickPositions.length) {
+    const openPos = backtickPositions[i];
+    const closePos = backtickPositions[i + 1];
+    ranges.push({
+      anchor: { path, offset: openPos },
+      focus: { path, offset: openPos + 3 },
+      codeDelimiter: true
+    });
+    if (closePos !== void 0) {
+      if (closePos > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: closePos },
+          codeBlock: true
+        });
+      }
+      ranges.push({
+        anchor: { path, offset: closePos },
+        focus: { path, offset: closePos + 3 },
+        codeDelimiter: true
+      });
+      i += 2;
+    } else {
+      if (text.length > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: text.length },
+          codeBlock: true
+        });
+      }
+      i += 1;
+    }
+  }
+  return ranges;
+}
+function CodeBlockLeaf({ attributes, children, leaf }) {
+  const leafAny = leaf;
+  if (leafAny.codeBlock) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...attributes,
+        className: "bg-muted/50 text-muted-foreground font-mono text-sm rounded px-1",
+        children
+      }
+    );
+  }
+  if (leafAny.codeDelimiter) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...attributes,
+        className: "text-muted-foreground/50 font-mono text-sm",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children });
+}
+var UserPromptInput = React7__namespace.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    clearOnSubmit = true,
+    placeholder = "Type your message...",
+    disabled = false,
+    isSubmitting = false,
+    minRows = 1,
+    maxRows = 6,
+    renderActions,
+    enableTags = false,
+    onTagCreate,
+    onTagDelete,
+    className,
+    ...props
+  }, ref) => {
+    const editorRef = React7__namespace.useRef(null);
+    const [internalValue, setInternalValue] = React7__namespace.useState(value);
+    React7__namespace.useEffect(() => {
+      setInternalValue(value);
+    }, [value]);
+    React7__namespace.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => editorRef.current?.focus(),
+        clear: () => {
+          editorRef.current?.clear();
+          setInternalValue("");
+        },
+        getText: () => editorRef.current?.getText() ?? "",
+        insertText: (text) => editorRef.current?.insertText(text)
+      }),
+      []
+    );
+    const handleChange = React7__namespace.useCallback(
+      (newValue) => {
+        setInternalValue(newValue);
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+    const handleSubmit = React7__namespace.useCallback(
+      (text) => {
+        if (disabled || isSubmitting) return;
+        if (!text.trim()) return;
+        onSubmit?.(text.trim());
+        if (clearOnSubmit) {
+          editorRef.current?.clear();
+          setInternalValue("");
+        }
+      },
+      [disabled, isSubmitting, onSubmit, clearOnSubmit]
+    );
+    const handleSendClick = React7__namespace.useCallback(() => {
+      const text = editorRef.current?.getText() ?? "";
+      handleSubmit(text);
+    }, [handleSubmit]);
+    const hasContent = internalValue.trim().length > 0;
+    const canSubmit = hasContent && !disabled && !isSubmitting;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: core.cn(
+          "rounded-lg border border-input bg-background",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2 pr-0 pt-1 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            editor.SlateEditor,
+            {
+              ref: editorRef,
+              value: internalValue,
+              onChange: handleChange,
+              onSubmit: handleSubmit,
+              clearOnSubmit: false,
+              placeholder,
+              disabled: disabled || isSubmitting,
+              enableTags,
+              onTagCreate,
+              onTagDelete,
+              minRows,
+              maxRows,
+              decorate: createCodeBlockDecorate,
+              renderLeaf: CodeBlockLeaf
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-2 pr-1 pb-1 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: renderActions?.() }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.IconButton,
+              {
+                icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, {}),
+                variant: "filled",
+                size: "sm",
+                "aria-label": isSubmitting ? "Sending..." : "Send message",
+                disabled: !canSubmit,
+                onClick: handleSendClick
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+UserPromptInput.displayName = "UserPromptInput";
 
 exports.ActionBar = ActionBar;
 exports.ActivityIndicators = ActivityIndicators;
 exports.AgentResponse = AgentResponse;
 exports.MetadataRow = MetadataRow;
 exports.ThinkingSection = ThinkingSection;
+exports.UserPrompt = UserPrompt;
+exports.UserPromptInput = UserPromptInput;
 exports.formatTime = formatTime;
 exports.formatTotalTime = formatTotalTime;
 exports.initialAgentResponseState = initialAgentResponseState;