Upload 3 files

use-chat-history.ts

@@ -0,0 +1,105 @@
+"use client"
+
+import { useCallback } from "react"
+import { useToast } from "@/hooks/use-toast"
+
+export function useChatHistory() {
+  const { toast } = useToast()
+
+  const exportHistory = useCallback(async () => {
+    try {
+      const response = await fetch("/api/export/json")
+      const data = await response.json()
+
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: "application/json",
+      })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `chat-history-${new Date().toISOString().split("T")[0]}.json`
+      a.click()
+      URL.revokeObjectURL(url)
+
+      toast({
+        title: "Export successful",
+        description: "Chat history exported to JSON file",
+      })
+    } catch (error) {
+      toast({
+        title: "Export failed",
+        description: "Could not export chat history",
+        variant: "destructive",
+      })
+    }
+  }, [toast])
+
+  const exportHTML = useCallback(async () => {
+    try {
+      const response = await fetch("/api/export/html")
+      const blob = await response.blob()
+
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `chat-export-${new Date().toISOString().split("T")[0]}.html`
+      a.click()
+      URL.revokeObjectURL(url)
+
+      toast({
+        title: "HTML export successful",
+        description: "Chat history exported to HTML file",
+      })
+    } catch (error) {
+      toast({
+        title: "Export failed",
+        description: "Could not export to HTML",
+        variant: "destructive",
+      })
+    }
+  }, [toast])
+
+  const importHistory = useCallback(() => {
+    const input = document.createElement("input")
+    input.type = "file"
+    input.accept = ".json"
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (!file) return
+
+      try {
+        const text = await file.text()
+        const data = JSON.parse(text)
+
+        const response = await fetch("/api/import", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        })
+
+        if (response.ok) {
+          toast({
+            title: "Import successful",
+            description: "Chat history imported successfully",
+          })
+          window.location.reload() // Refresh to show imported data
+        } else {
+          throw new Error("Import failed")
+        }
+      } catch (error) {
+        toast({
+          title: "Import failed",
+          description: "Could not import chat history",
+          variant: "destructive",
+        })
+      }
+    }
+    input.click()
+  }, [toast])
+
+  return {
+    exportHistory,
+    exportHTML,
+    importHistory,
+  }
+}

use-chat.ts

@@ -0,0 +1,200 @@
+"use client"
+
+import { useState, useCallback, useEffect } from "react"
+import type { Message, AIProvider } from "@/types/chat"
+import { useToast } from "@/hooks/use-toast"
+
+export function useChat(provider: AIProvider) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [suggestions, setSuggestions] = useState<string[]>([
+    "Explain this concept",
+    "Give me examples",
+    "Summarize the key points",
+    "What are the pros and cons?",
+    "How does this work?",
+  ])
+  const { toast } = useToast()
+
+  useEffect(() => {
+    loadChatHistory()
+  }, [])
+
+  const loadChatHistory = useCallback(async () => {
+    try {
+      const response = await fetch("/api/chat/history")
+      if (response.ok) {
+        const data = await response.json()
+        setMessages(data.messages || [])
+      }
+    } catch (error) {
+      console.error("Failed to load chat history:", error)
+    }
+  }, [])
+
+  const sendMessage = useCallback(
+    async (content: string, file?: File) => {
+      if (!content.trim() && !file) return
+
+      const userMessage: Message = {
+        id: Date.now().toString(),
+        role: "user",
+        content: content || `[File: ${file?.name}]`,
+        timestamp: new Date(),
+        file: file
+          ? {
+              name: file.name,
+              type: file.type,
+              content: await file.text().catch(() => "[Binary file]"),
+            }
+          : undefined,
+      }
+
+      setMessages((prev) => [...prev, userMessage])
+      setIsLoading(true)
+
+      try {
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            message: content,
+            provider,
+            file: userMessage.file,
+            history: messages.slice(-10),
+          }),
+        })
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+
+        const data = await response.json()
+
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: data.content,
+          provider,
+          timestamp: new Date(),
+        }
+
+        setMessages((prev) => [...prev, assistantMessage])
+
+        setSuggestions([
+          "Explain this further",
+          "Give me a different perspective",
+          "What's the next step?",
+          "Can you elaborate?",
+          "Show me an example",
+        ])
+      } catch (error) {
+        console.error("Chat error:", error)
+        toast({
+          title: "Error",
+          description: "Failed to send message. Please try again.",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [provider, messages, toast],
+  )
+
+  const clearChat = useCallback(async () => {
+    try {
+      await fetch("/api/chat/clear", { method: "POST" })
+      setMessages([])
+      setSuggestions([
+        "Explain this concept",
+        "Give me examples",
+        "Summarize the key points",
+        "What are the pros and cons?",
+        "How does this work?",
+      ])
+      toast({ title: "Chat cleared successfully" })
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to clear chat",
+        variant: "destructive",
+      })
+    }
+  }, [toast])
+
+  const uploadHistory = useCallback(
+    (file: File) => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        try {
+          const data = JSON.parse(reader.result as string)
+          setMessages(data.messages || data || [])
+          toast({ title: "Chat history uploaded successfully" })
+        } catch (error) {
+          toast({
+            title: "Error",
+            description: "Invalid file format",
+            variant: "destructive",
+          })
+        }
+      }
+      reader.readAsText(file)
+    },
+    [toast],
+  )
+
+  const downloadHistory = useCallback(() => {
+    const data = { messages, exportDate: new Date().toISOString() }
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" })
+    const link = document.createElement("a")
+    link.href = URL.createObjectURL(blob)
+    link.download = `chat-history-${new Date().toISOString().split("T")[0]}.json`
+    link.click()
+    toast({ title: "Chat history downloaded" })
+  }, [messages, toast])
+
+  const exportHTML = useCallback(async () => {
+    try {
+      const response = await fetch("/api/export/html", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ messages }),
+      })
+
+      if (response.ok) {
+        const blob = await response.blob()
+        const link = document.createElement("a")
+        link.href = URL.createObjectURL(blob)
+        link.download = `chat-export-${new Date().toISOString().split("T")[0]}.html`
+        link.click()
+        toast({ title: "HTML export downloaded" })
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to export HTML",
+        variant: "destructive",
+      })
+    }
+  }, [messages, toast])
+
+  const copyJSON = useCallback(() => {
+    const data = { messages, exportDate: new Date().toISOString() }
+    navigator.clipboard.writeText(JSON.stringify(data, null, 2))
+    toast({ title: "Chat JSON copied to clipboard" })
+  }, [messages, toast])
+
+  return {
+    messages,
+    isLoading,
+    sendMessage,
+    suggestions,
+    clearChat,
+    uploadHistory,
+    downloadHistory,
+    exportHTML,
+    copyJSON,
+    loadChatHistory,
+  }
+}

use-toast.ts

@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }