fixdog 0.0.1 → 0.0.2

package/src/api/client.ts

@@ -1,141 +0,0 @@
-export interface EditRequest {
-  editorUrl: string;
-  userInput: string;
-}
-
-export interface EditResponse {
-  sessionId: string;
-  message: string;
-  status: "success" | "error";
-  error?: string;
-}
-
-export interface ChatRequest {
-  prompt: string;
-  sessionId?: string;
-}
-
-export interface ChatResponse {
-  ok: boolean;
-  message: string;
-  sessionId?: string;
-  error?: string;
-}
-
-export interface SendToDevRequest {
-  sessionId: string;
-}
-
-export interface SendToDevResponse {
-  ok: boolean;
-  prUrl?: string;
-  prNumber?: number;
-  branchName?: string;
-  error?: string;
-}
-
-export async function createEditSession(
-  request: EditRequest,
-  apiEndpoint: string = "https://api.ui.dog"
-): Promise<EditResponse> {
-  try {
-    const response = await fetch(`${apiEndpoint}/api/sessions`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text().catch(() => response.statusText);
-      throw new Error(`API error (${response.status}): ${errorText}`);
-    }
-
-    return await response.json();
-  } catch (error) {
-    if (error instanceof Error) {
-      throw error;
-    }
-    throw new Error("Unknown error occurred");
-  }
-}
-
-export async function sendChatPrompt(
-  request: ChatRequest,
-  apiEndpoint: string = "http://localhost:3000"
-): Promise<ChatResponse> {
-  try {
-    const response = await fetch(`${apiEndpoint}/chat`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    });
-
-    if (!response.ok) {
-      const errorData = await response
-        .json()
-        .catch(() => ({ error: response.statusText }));
-      return {
-        ok: false,
-        message: "",
-        error: errorData.error || `API error (${response.status})`,
-      };
-    }
-
-    return await response.json();
-  } catch (error) {
-    if (error instanceof Error) {
-      return {
-        ok: false,
-        message: "",
-        error: error.message,
-      };
-    }
-    return {
-      ok: false,
-      message: "",
-      error: "Unknown error occurred",
-    };
-  }
-}
-
-export async function sendToDeveloper(
-  request: SendToDevRequest,
-  apiEndpoint: string = "http://localhost:3000"
-): Promise<SendToDevResponse> {
-  try {
-    const response = await fetch(`${apiEndpoint}/send-to-dev`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    });
-
-    if (!response.ok) {
-      const errorData = await response
-        .json()
-        .catch(() => ({ error: response.statusText }));
-      return {
-        ok: false,
-        error: errorData.error || `API error (${response.status})`,
-      };
-    }
-
-    return await response.json();
-  } catch (error) {
-    if (error instanceof Error) {
-      return {
-        ok: false,
-        error: error.message,
-      };
-    }
-    return {
-      ok: false,
-      error: "Unknown error occurred",
-    };
-  }
-}

package/src/client/index.ts

@@ -1,75 +0,0 @@
-/**
- * Client entry point for UiDog Next.js integration
- *
- * This file is designed to be imported in:
- * - Next.js 15.3+: instrumentation-client.ts at project root
- * - Next.js 14.x / Pages Router: top of _app.tsx (must be first import)
- *
- * IMPORTANT: This file MUST be imported BEFORE React loads to properly
- * install Bippy's React DevTools hook.
- *
- * Usage:
- * ```typescript
- * // instrumentation-client.ts (Next.js 15.3+)
- * import 'uidog-sdk-next/client';
- * ```
- *
- * ```typescript
- * // pages/_app.tsx (Next.js 14.x / Pages Router)
- * import 'uidog-sdk-next/client'; // MUST be first import
- * import type { AppProps } from 'next/app';
- * // ... rest of your imports
- * ```
- */
-
-// Import bippy FIRST to install the React DevTools hook
-// This must happen before React is imported anywhere
-import "bippy";
-
-import { initializeUiDogNext } from "../index";
-import type { UiDogNextOptions } from "../types";
-
-// Store options for deferred initialization
-let pendingOptions: UiDogNextOptions = {};
-let isAutoInitEnabled = true;
-
-/**
- * Configure UiDog options before initialization
- * Call this before auto-initialization happens (at DOMContentLoaded)
- */
-export function configureUiDogNext(options: UiDogNextOptions): void {
-  pendingOptions = { ...pendingOptions, ...options };
-}
-
-/**
- * Disable auto-initialization
- * Use this if you want to manually initialize UiDog later
- */
-export function disableAutoInit(): void {
-  isAutoInitEnabled = false;
-}
-
-/**
- * Initialize UiDog with the configured options
- */
-function initialize(): void {
-  if (!isAutoInitEnabled) return;
-
-  initializeUiDogNext(pendingOptions);
-}
-
-// Auto-initialize when imported (browser only)
-if (typeof window !== "undefined") {
-  // Initialize when DOM is ready
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initialize);
-  } else {
-    // DOM is already ready, initialize immediately
-    // Use setTimeout to ensure this runs after any synchronous configuration
-    setTimeout(initialize, 0);
-  }
-}
-
-// Re-export main functions for convenience
-export { initializeUiDogNext } from "../index";
-export type { UiDogNextOptions } from "../types";

package/src/client/init.tsx

@@ -1,78 +0,0 @@
-/**
- * UiDogProvider - React component for configuring UiDog in Next.js App Router
- *
- * This component provides a declarative way to configure UiDog options.
- * It should be used in your root layout.tsx for App Router apps.
- *
- * Usage:
- * ```tsx
- * // app/layout.tsx
- * import { UiDogProvider } from 'uidog-sdk-next/init';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <body>
- *         <UiDogProvider editor="cursor" enableSidebar>
- *           {children}
- *         </UiDogProvider>
- *       </body>
- *     </html>
- *   );
- * }
- * ```
- *
- * Note: You still need to import 'uidog-sdk-next/client' in instrumentation-client.ts
- * This provider is for configuration, not initialization.
- */
-
-"use client";
-
-import { useEffect, type ReactNode } from "react";
-import { initializeUiDogNext, cleanupUiDogNext, isUiDogNextInitialized } from "../index";
-import type { UiDogNextOptions, EditorType } from "../types";
-
-export interface UiDogProviderProps extends UiDogNextOptions {
-  children: ReactNode;
-}
-
-export function UiDogProvider({
-  children,
-  editor = "cursor",
-  projectPath = "",
-  modifier = "alt",
-  enableSidebar = true,
-  apiEndpoint = "https://api.ui.dog",
-}: UiDogProviderProps) {
-  useEffect(() => {
-    // Only initialize in development mode
-    if (process.env.NODE_ENV !== "development") {
-      return;
-    }
-
-    // Don't re-initialize if already done
-    if (isUiDogNextInitialized()) {
-      return;
-    }
-
-    initializeUiDogNext({
-      editor,
-      projectPath,
-      modifier,
-      enableSidebar,
-      apiEndpoint,
-    });
-
-    // Cleanup on unmount (though this rarely happens for root providers)
-    return () => {
-      // Note: We typically don't cleanup on unmount as this is a root-level provider
-      // Uncomment if needed for testing:
-      // cleanupUiDogNext();
-    };
-  }, [editor, projectPath, modifier, enableSidebar, apiEndpoint]);
-
-  return <>{children}</>;
-}
-
-// Re-export types for convenience
-export type { UiDogNextOptions, EditorType };

package/src/components/ConversationalInputReact.tsx

@@ -1,406 +0,0 @@
-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>
-    </>
-  );
-}