fixdog 0.0.1

package/src/components/ConversationalInputReact.tsx

@@ -0,0 +1,406 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  sendChatPrompt,
+  ChatRequest,
+  ChatResponse,
+  sendToDeveloper,
+  SendToDevResponse,
+} from "../api/client";
+import { ElementInfo } from "../types/sidebar";
+
+interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: number;
+  isLoading?: boolean;
+  error?: string;
+}
+
+interface ConversationalInputProps {
+  elementInfo: ElementInfo;
+  editorUrl: string;
+  apiEndpoint: string;
+}
+
+export function ConversationalInputReact(props: ConversationalInputProps) {
+  const [userInput, setUserInput] = useState("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+  const [isCreatingPR, setIsCreatingPR] = useState(false);
+  const [prUrl, setPrUrl] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    // Auto-resize textarea
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  }, [userInput]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom when new messages are added
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSubmit = async () => {
+    const input = userInput.trim();
+    if (!input || isLoading) return;
+
+    // Add user message to history
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: "user",
+      content: input,
+      timestamp: Date.now(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setUserInput("");
+    setIsLoading(true);
+
+    // Add loading message
+    const loadingMessageId = `loading-${Date.now()}`;
+    const loadingMessage: Message = {
+      id: loadingMessageId,
+      role: "assistant",
+      content: "",
+      timestamp: Date.now(),
+      isLoading: true,
+    };
+    setMessages((prev) => [...prev, loadingMessage]);
+
+    const request: ChatRequest = {
+      prompt: `The component selected by the user: ${props.editorUrl}
+User request: ${input}
+Update multiple files (if necessary) to achieve the user's request.`,
+      sessionId: sessionId,
+    };
+
+    try {
+      const result: ChatResponse = await sendChatPrompt(
+        request,
+        props.apiEndpoint
+      );
+
+      // Save sessionId from response if provided
+      if (result.sessionId && !sessionId) {
+        setSessionId(result.sessionId);
+      }
+
+      // Remove loading message and add response
+      setMessages((prev) => {
+        const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+        const assistantMessage: Message = {
+          id: `assistant-${Date.now()}`,
+          role: "assistant",
+          content: result.ok
+            ? result.message
+            : result.error || "Request failed",
+          timestamp: Date.now(),
+          error: !result.ok ? result.error : undefined,
+        };
+        return [...filtered, assistantMessage];
+      });
+    } catch (err) {
+      // Remove loading message and add error
+      setMessages((prev) => {
+        const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+        const errorMessage: Message = {
+          id: `error-${Date.now()}`,
+          role: "assistant",
+          content:
+            err instanceof Error ? err.message : "Unknown error occurred",
+          timestamp: Date.now(),
+          error: err instanceof Error ? err.message : "Unknown error occurred",
+        };
+        return [...filtered, errorMessage];
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Submit on Cmd/Ctrl + Enter
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const handleSendToDeveloper = async () => {
+    if (!sessionId || isCreatingPR) return;
+
+    setIsCreatingPR(true);
+    setPrUrl(null);
+
+    try {
+      const result: SendToDevResponse = await sendToDeveloper(
+        { sessionId },
+        props.apiEndpoint
+      );
+
+      if (result.ok && result.prUrl) {
+        setPrUrl(result.prUrl);
+        // Add success message
+        const successMessage: Message = {
+          id: `pr-success-${Date.now()}`,
+          role: "assistant",
+          content: `Pull request created successfully!`,
+          timestamp: Date.now(),
+        };
+        setMessages((prev) => [...prev, successMessage]);
+      } else {
+        // Add error message
+        const errorMessage: Message = {
+          id: `pr-error-${Date.now()}`,
+          role: "assistant",
+          content: result.error || "Failed to create pull request",
+          timestamp: Date.now(),
+          error: result.error || "Failed to create pull request",
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+      }
+    } catch (err) {
+      const errorMessage: Message = {
+        id: `pr-error-${Date.now()}`,
+        role: "assistant",
+        content: err instanceof Error ? err.message : "Unknown error occurred",
+        timestamp: Date.now(),
+        error: err instanceof Error ? err.message : "Unknown error occurred",
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsCreatingPR(false);
+    }
+  };
+
+  const handleRetry = async (messageId: string) => {
+    // Find the user message that corresponds to this error
+    const errorIndex = messages.findIndex((msg) => msg.id === messageId);
+    if (errorIndex === -1) return;
+
+    // Find the previous user message
+    let userMessageIndex = -1;
+    for (let i = errorIndex - 1; i >= 0; i--) {
+      if (messages[i].role === "user") {
+        userMessageIndex = i;
+        break;
+      }
+    }
+
+    if (userMessageIndex === -1) return;
+
+    const userMessage = messages[userMessageIndex];
+    const input = userMessage.content;
+
+    // Remove error message
+    setMessages((prev) => prev.filter((msg) => msg.id !== messageId));
+
+    setIsLoading(true);
+
+    // Add loading message
+    const loadingMessageId = `loading-${Date.now()}`;
+    const loadingMessage: Message = {
+      id: loadingMessageId,
+      role: "assistant",
+      content: "",
+      timestamp: Date.now(),
+      isLoading: true,
+    };
+    setMessages((prev) => [...prev, loadingMessage]);
+
+    const request: ChatRequest = {
+      prompt: `The component selected by the user: ${props.editorUrl}
+User request: ${input}
+Update multiple files (if necessary) to achieve the user's request.`,
+      sessionId: sessionId,
+    };
+
+    try {
+      const result: ChatResponse = await sendChatPrompt(
+        request,
+        props.apiEndpoint
+      );
+
+      // Save sessionId from response if provided
+      if (result.sessionId && !sessionId) {
+        setSessionId(result.sessionId);
+      }
+
+      // Remove loading message and add response
+      setMessages((prev) => {
+        const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+        const assistantMessage: Message = {
+          id: `assistant-${Date.now()}`,
+          role: "assistant",
+          content: result.ok
+            ? result.message
+            : result.error || "Request failed",
+          timestamp: Date.now(),
+          error: !result.ok ? result.error : undefined,
+        };
+        return [...filtered, assistantMessage];
+      });
+    } catch (err) {
+      // Remove loading message and add error
+      setMessages((prev) => {
+        const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+        const errorMessage: Message = {
+          id: `error-${Date.now()}`,
+          role: "assistant",
+          content:
+            err instanceof Error ? err.message : "Unknown error occurred",
+          timestamp: Date.now(),
+          error: err instanceof Error ? err.message : "Unknown error occurred",
+        };
+        return [...filtered, errorMessage];
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      {/* Messages Area */}
+      <div className="uidog-messages-container">
+        {messages.length === 0 && (
+          <div className="uidog-empty-state">
+            <div className="uidog-empty-state-text">
+              What changes would you like to make?
+            </div>
+          </div>
+        )}
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`uidog-message uidog-message-${message.role}`}
+          >
+            <div className="uidog-message-bubble">
+              {message.isLoading ? (
+                <div className="uidog-message-loading">
+                  <div className="uidog-spinner"></div>
+                  <span>Processing your request...</span>
+                </div>
+              ) : message.error ? (
+                <>
+                  <div className="uidog-message-content uidog-message-error">
+                    {message.content}
+                  </div>
+                  <button
+                    className="uidog-retry-btn"
+                    onClick={() => handleRetry(message.id)}
+                  >
+                    Retry
+                  </button>
+                </>
+              ) : (
+                <div className="uidog-message-content">{message.content}</div>
+              )}
+            </div>
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Fixed Input Footer */}
+      <div className="uidog-input-footer-fixed">
+        <div className="uidog-input-wrapper">
+          <textarea
+            id="uidog-textarea"
+            ref={textareaRef}
+            className="uidog-textarea"
+            placeholder="Describe the changes you want..."
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isLoading}
+          />
+          <button
+            className="uidog-submit-btn"
+            onClick={handleSubmit}
+            disabled={!userInput.trim() || isLoading}
+            title="Send message (Cmd/Ctrl + Enter)"
+          >
+            {isLoading ? (
+              <div className="uidog-spinner-small"></div>
+            ) : (
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 2L8 14M8 2L2 8M8 2L14 8"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+        <div className="uidog-input-hint">Cmd/Ctrl + Enter to submit</div>
+        {sessionId && (
+          <div className="uidog-send-to-dev-section">
+            <button
+              className="uidog-send-to-dev-btn"
+              onClick={handleSendToDeveloper}
+              disabled={isCreatingPR || isLoading}
+              title="Create PR with changes"
+            >
+              {isCreatingPR ? (
+                <>
+                  <div className="uidog-spinner-small"></div>
+                  <span>Creating PR...</span>
+                </>
+              ) : (
+                <>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8 1L8 15M8 1L1 8M8 1L15 8"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  <span>Submit to Developer</span>
+                </>
+              )}
+            </button>
+            {prUrl && (
+              <a
+                href={prUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="uidog-pr-link"
+              >
+                View PR →
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/ElementInfoDisplayReact.tsx

@@ -0,0 +1,84 @@
+import type { ElementInfo } from "../types";
+
+interface ElementInfoDisplayProps {
+  elementInfo: ElementInfo;
+  onClose: () => void;
+}
+
+export function ElementInfoDisplayReact(props: ElementInfoDisplayProps) {
+  const isDomSnapshot = props.elementInfo.kind === "dom";
+
+  if (isDomSnapshot) {
+    const dom = props.elementInfo.domSnapshot;
+    const outerHTML = dom?.outerHTML || "No HTML available";
+    const text = dom?.text || "";
+    const attributes = dom?.attributes || {};
+
+    return (
+      <div className="uidog-element-info">
+        <div className="uidog-element-info-content">
+          <div className="uidog-file-location">
+            Server-rendered DOM (no source available)
+          </div>
+          <button
+            className="uidog-close-btn"
+            onClick={props.onClose}
+            title="Close sidebar (ESC)"
+            aria-label="Close sidebar"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="uidog-dom-snapshot">
+          <div className="uidog-dom-label">outerHTML (trimmed):</div>
+          <pre className="uidog-dom-snippet">{outerHTML}</pre>
+
+          {text && (
+            <>
+              <div className="uidog-dom-label">textContent (trimmed):</div>
+              <pre className="uidog-dom-snippet">{text}</pre>
+            </>
+          )}
+
+          {Object.keys(attributes).length > 0 && (
+            <div className="uidog-dom-attributes">
+              <div className="uidog-dom-label">attributes:</div>
+              <ul>
+                {Object.entries(attributes).map(([key, value]) => (
+                  <li key={key}>
+                    <code>{key}</code>=<code>{value}</code>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className="uidog-dom-hint">
+            To see file/line info, render this DOM through a small client
+            boundary.
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const fileName = props.elementInfo.filePath?.split("/").pop() || "";
+  const fileLocation = `Selected element at ${fileName}`;
+
+  return (
+    <div className="uidog-element-info">
+      <div className="uidog-element-info-content">
+        <span className="uidog-file-location">{fileLocation}</span>
+        <button
+          className="uidog-close-btn"
+          onClick={props.onClose}
+          title="Close sidebar (ESC)"
+          aria-label="Close sidebar"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/UiDogSidebarReact.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import type { ElementInfo } from "../types";
+import { ElementInfoDisplayReact } from "./ElementInfoDisplayReact";
+import { ConversationalInputReact } from "./ConversationalInputReact";
+
+interface UiDogSidebarProps {
+  elementInfo: ElementInfo;
+  editorUrl: string;
+  onClose: () => void;
+  apiEndpoint: string;
+}
+
+export function UiDogSidebarReact(props: UiDogSidebarProps) {
+  useEffect(() => {
+    const handleEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        props.onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [props]);
+
+  return (
+    <div className="uidog-sidebar-overlay">
+      <div className="uidog-sidebar">
+        {/* Element Info Section */}
+        <div className="uidog-element-info-section">
+          <ElementInfoDisplayReact
+            elementInfo={props.elementInfo}
+            onClose={props.onClose}
+          />
+        </div>
+
+        {/* Chat Area - Messages + Input */}
+        <div className="uidog-chat-container">
+          <ConversationalInputReact
+            elementInfo={props.elementInfo}
+            editorUrl={props.editorUrl}
+            apiEndpoint={props.apiEndpoint}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}