kaddidlehopper 0.5.0 → 0.6.0

package/add-ons/ai/README.md

@@ -1,34 +0,0 @@
-# AI Chat Add-on
-
-This add-on provides AI chat capabilities with multi-vendor support for your application.
-
-## Features
-
-- **Chat Page** (`/chat`) - Full-featured chat interface with model selection
-- **AI Assistant** - Pop-up assistant available throughout the app
-- **Multi-vendor Support** - Works with OpenAI, Anthropic, Gemini, and Ollama
-
-## Setup
-
-Add your API keys to `.env.local`:
-
-```bash
-# Anthropic (Claude)
-ANTHROPIC_API_KEY=your-key-here
-
-# OpenAI (GPT-4o)
-OPENAI_API_KEY=your-key-here
-
-# Google Gemini
-GEMINI_API_KEY=your-key-here
-```
-
-**Note:** Ollama is available locally without an API key. Install from [ollama.ai](https://ollama.ai).
-
-## Usage
-
-The chat page is available at `/chat`. The AI Assistant button is added to the header and provides a pop-up chat interface available on any page.
-
-## Dependencies
-
-This add-on requires the `start` and `store` add-ons.

package/add-ons/ai/assets/AGENTS.md.append

@@ -1,24 +0,0 @@
-### AI Integration
-
-Multi-provider AI chat with fallback chain:
-
-1. Anthropic Claude (preferred)
-2. OpenAI GPT-4o
-3. Google Gemini
-4. Ollama (local)
-
-**Tools available to AI:**
-- `getWeather` - Get the current weather for a city. Returns temperature, condition, and humidity.
-
-## Environment Variables
-
-For AI functionality, set one or more:
-
-```
-ANTHROPIC_API_KEY=...
-OPENAI_API_KEY=...
-GOOGLE_GENERATIVE_AI_API_KEY=...
-OLLAMA_BASE_URL=...
-```
-
-The application uses the first available provider in the fallback chain.

package/add-ons/ai/assets/_dot_env.local.append

@@ -1,13 +0,0 @@
-# AI Provider API Keys (add the ones you want to use)
-# At least one key is required for AI chat to work
-
-# Anthropic (Claude)
-ANTHROPIC_API_KEY=
-
-# OpenAI (GPT-4o)
-OPENAI_API_KEY=
-
-# Google Gemini
-GEMINI_API_KEY=
-
-# Note: Ollama is available locally without an API key

package/add-ons/ai/assets/src/components/AIAssistant.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useStore } from "@tanstack/react-store";
-import { Store } from "@tanstack/store";
-
-import { Send, X, ChevronRight } from "lucide-react";
-import { Streamdown } from "streamdown";
-
-import { useAIChat } from "@/lib/ai-hook";
-import type { ChatMessages } from "@/lib/ai-hook";
-
-export const showAIAssistant = new Store(false);
-
-function Messages({ messages }: { messages: ChatMessages }) {
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTop =
-        messagesContainerRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  if (!messages.length) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
-        Ask me anything! I'm here to help.
-      </div>
-    );
-  }
-
-  return (
-    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
-      {messages.map(({ id, role, parts }) => (
-        <div
-          key={id}
-          className={`py-3 ${
-            role === "assistant"
-              ? "bg-linear-to-r from-orange-500/5 to-red-600/5"
-              : "bg-transparent"
-          }`}
-        >
-          {parts.map((part, index) => {
-            if (part.type === "text" && part.content) {
-              return (
-                <div key={index} className="flex items-start gap-2 px-4">
-                  {role === "assistant" ? (
-                    <div className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
-                      AI
-                    </div>
-                  ) : (
-                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
-                      Y
-                    </div>
-                  )}
-                  <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
-                    <Streamdown>{part.content}</Streamdown>
-                  </div>
-                </div>
-              );
-            }
-            return null;
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default function AIAssistant() {
-  const isOpen = useStore(showAIAssistant);
-  const { messages, sendMessage } = useAIChat();
-  const [input, setInput] = useState("");
-
-  return (
-    <div className="relative z-50">
-      <button
-        onClick={() => showAIAssistant.setState((state) => !state)}
-        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
-      >
-        <div className="flex items-center gap-2">
-          <div className="w-5 h-5 rounded-lg bg-white/20 flex items-center justify-center text-xs font-medium">
-            AI
-          </div>
-          <span className="font-medium">AI Assistant</span>
-        </div>
-        <ChevronRight className="w-4 h-4" />
-      </button>
-
-      {isOpen && (
-        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
-          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
-            <h3 className="font-semibold text-white">AI Assistant</h3>
-            <button
-              onClick={() => showAIAssistant.setState((state) => !state)}
-              className="text-gray-400 hover:text-white transition-colors"
-            >
-              <X className="w-4 h-4" />
-            </button>
-          </div>
-
-          <Messages messages={messages} />
-
-          <div className="p-3 border-t border-orange-500/20">
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                if (input.trim()) {
-                  sendMessage(input);
-                  setInput("");
-                }
-              }}
-            >
-              <div className="relative">
-                <textarea
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Type your message..."
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
-                  rows={1}
-                  style={{ minHeight: "36px", maxHeight: "120px" }}
-                  onInput={(e) => {
-                    const target = e.target as HTMLTextAreaElement;
-                    target.style.height = "auto";
-                    target.style.height =
-                      Math.min(target.scrollHeight, 120) + "px";
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && !e.shiftKey && input.trim()) {
-                      e.preventDefault();
-                      sendMessage(input);
-                      setInput("");
-                    }
-                  }}
-                />
-                <button
-                  type="submit"
-                  disabled={!input.trim()}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
-                >
-                  <Send className="w-4 h-4" />
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/add-ons/ai/assets/src/lib/ai-hook.ts

@@ -1,21 +0,0 @@
-import {
-  fetchServerSentEvents,
-  useChat,
-  createChatClientOptions,
-} from '@tanstack/ai-react'
-import type { InferChatMessages } from '@tanstack/ai-react'
-
-// Default chat options for simple usage
-const defaultChatOptions = createChatClientOptions({
-  connection: fetchServerSentEvents('/api/chat'),
-})
-
-export type ChatMessages = InferChatMessages<typeof defaultChatOptions>
-
-export const useAIChat = () => {
-  const chatOptions = createChatClientOptions({
-    connection: fetchServerSentEvents('/api/chat'),
-  })
-
-  return useChat(chatOptions)
-}

package/add-ons/ai/assets/src/lib/weather-tools.ts

@@ -1,30 +0,0 @@
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-// Tool definition for getting weather
-export const getWeatherToolDef = toolDefinition({
-  name: 'getWeather',
-  description:
-    'Get the current weather for a city. Returns temperature, condition, and humidity.',
-  inputSchema: z.object({
-    city: z.string().describe('The city to get weather for'),
-  }),
-  outputSchema: z.object({
-    city: z.string(),
-    temperature: z.number(),
-    condition: z.string(),
-    humidity: z.number(),
-  }),
-})
-
-// Server implementation - mock weather data
-export const getWeather = getWeatherToolDef.server(({ city }) => {
-  // Mock weather data - in a real app, call a weather API
-  const conditions = ['sunny', 'cloudy', 'rainy', 'partly cloudy', 'windy']
-  return {
-    city,
-    temperature: Math.floor(Math.random() * 30) + 5,
-    condition: conditions[Math.floor(Math.random() * conditions.length)],
-    humidity: Math.floor(Math.random() * 50) + 30,
-  }
-})

package/add-ons/ai/assets/src/routes/api.chat.ts

@@ -1,94 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
-import { anthropicText } from '@tanstack/ai-anthropic'
-import { openaiText } from '@tanstack/ai-openai'
-import { geminiText } from '@tanstack/ai-gemini'
-import { ollamaText } from '@tanstack/ai-ollama'
-
-import { getWeather } from '@/lib/weather-tools'
-
-const SYSTEM_PROMPT = `You are a helpful weather assistant. You can check the weather for any city using the getWeather tool.
-
-CAPABILITIES:
-1. Use getWeather to get the current weather for any city
-
-INSTRUCTIONS:
-- When users ask about weather, use the getWeather tool to get the information
-- Provide friendly, conversational responses about the weather
-- You can give advice based on weather conditions (e.g., "bring an umbrella" if rainy)
-- Keep responses concise but helpful`
-
-export const Route = createFileRoute('/api/chat')({
-  server: {
-    handlers: {
-      POST: async ({ request }) => {
-        const requestSignal = request.signal
-
-        if (requestSignal.aborted) {
-          return new Response(null, { status: 499 })
-        }
-
-        const abortController = new AbortController()
-
-        try {
-          const body = await request.json()
-          const { messages } = body
-          const data = body.data || {}
-
-          // Determine the best available provider
-          let provider: 'anthropic' | 'openai' | 'gemini' | 'ollama' =
-            data.provider || 'ollama'
-          let model: string = data.model || 'mistral:7b'
-
-          // Use the first available provider with an API key, fallback to ollama
-          if (process.env.ANTHROPIC_API_KEY) {
-            provider = 'anthropic'
-            model = 'claude-haiku-4-5'
-          } else if (process.env.OPENAI_API_KEY) {
-            provider = 'openai'
-            model = 'gpt-4o'
-          } else if (process.env.GEMINI_API_KEY) {
-            provider = 'gemini'
-            model = 'gemini-2.0-flash-exp'
-          }
-
-          const adapterConfig = {
-            anthropic: () =>
-              anthropicText((model || 'claude-haiku-4-5') as any),
-            openai: () => openaiText((model || 'gpt-4o') as any),
-            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
-            ollama: () => ollamaText((model || 'mistral:7b') as any),
-          }
-
-          const adapter = adapterConfig[provider]()
-
-          const stream = chat({
-            adapter,
-            tools: [getWeather],
-            systemPrompts: [SYSTEM_PROMPT],
-            agentLoopStrategy: maxIterations(5),
-            messages,
-            abortController,
-          })
-
-          return toServerSentEventsResponse(stream, { abortController })
-        } catch (error: any) {
-          console.error('Chat error:', error)
-          if (error.name === 'AbortError' || abortController.signal.aborted) {
-            return new Response(null, { status: 499 })
-          }
-          return new Response(
-            JSON.stringify({
-              error: 'Failed to process chat request',
-              message: error.message,
-            }),
-            {
-              status: 500,
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        }
-      },
-    },
-  },
-})

package/add-ons/ai/assets/src/routes/chat.css

@@ -1,175 +0,0 @@
-@import "tailwindcss";
-@import "highlight.js/styles/github-dark.css";
-@source "../../../../node_modules/streamdown/dist/*.js";
-
-/* Custom scrollbar styles */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.5);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.7);
-}
-
-/* Smooth transitions for dark mode */
-html {
-  transition: background-color 0.3s ease;
-}
-
-/* Markdown content styles */
-.prose {
-  max-width: none;
-  color: #e5e7eb; /* text-gray-200 */
-}
-
-.prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
-  padding: 0.2em 0.4em;
-  border-radius: 0.375rem;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1.25em 0;
-  overflow-x: auto;
-}
-
-.prose pre code {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-  color: inherit;
-}
-
-.prose h1,
-.prose h2,
-.prose h3,
-.prose h4 {
-  color: #f9fafb; /* text-gray-50 */
-}
-
-.prose ul,
-.prose ol {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-left: 1.625em;
-}
-
-.prose li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose blockquote {
-  border-left-color: #f97316; /* orange-500 */
-  background-color: rgba(249, 115, 22, 0.1);
-  padding: 1em;
-  margin: 1.25em 0;
-  border-radius: 0.5rem;
-}
-
-.prose hr {
-  border-color: rgba(249, 115, 22, 0.2);
-  margin: 2em 0;
-}
-
-.prose a {
-  color: #f97316; /* orange-500 */
-  text-decoration: underline;
-  text-decoration-thickness: 0.1em;
-  text-underline-offset: 0.2em;
-}
-
-.prose a:hover {
-  color: #fb923c; /* orange-400 */
-}
-
-.prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.25em 0;
-}
-
-.prose th,
-.prose td {
-  padding: 0.75em;
-  border: 1px solid rgba(249, 115, 22, 0.2);
-}
-
-.prose th {
-  background-color: rgba(249, 115, 22, 0.1);
-  font-weight: 600;
-}
-
-/* Message transition animations */
-.message-enter {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.message-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity 300ms,
-    transform 300ms;
-}
-
-.message-exit {
-  opacity: 1;
-}
-
-.message-exit-active {
-  opacity: 0;
-  transition: opacity 300ms;
-}
-
-/* Heading styles */
-.prose h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
-}
-
-.prose h2 {
-  font-size: 1.5em;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-.prose h3 {
-  font-size: 1.25em;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-.prose ul {
-  list-style-type: disc;
-  padding-left: 1.5em;
-}
-
-.prose ol {
-  list-style-type: decimal;
-  padding-left: 1.5em;
-}
-
-.prose strong {
-  color: #f9fafb; /* text-gray-50 */
-  font-weight: 600;
-}
-
-.prose em {
-  font-style: italic;
-}

package/add-ons/ai/assets/src/routes/chat.tsx

@@ -1,141 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { createFileRoute } from '@tanstack/react-router'
-import { Send, Square } from 'lucide-react'
-import { Streamdown } from 'streamdown'
-
-import { useAIChat } from '@/lib/ai-hook'
-import type { ChatMessages } from '@/lib/ai-hook'
-
-import './chat.css'
-
-function Messages({ messages }: { messages: ChatMessages }) {
-  const messagesContainerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTop =
-        messagesContainerRef.current.scrollHeight
-    }
-  }, [messages])
-
-  if (!messages.length) {
-    return null
-  }
-
-  return (
-    <div
-      ref={messagesContainerRef}
-      className="flex-1 overflow-y-auto pb-4 min-h-0"
-    >
-      <div className="max-w-3xl mx-auto w-full px-4">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`p-4 ${
-              message.role === 'assistant'
-                ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
-                : 'bg-transparent'
-            }`}
-          >
-            <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
-              <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-sm font-medium text-white flex-shrink-0 ${
-                message.role === 'assistant'
-                  ? 'bg-linear-to-r from-orange-500 to-red-600'
-                  : 'bg-gray-700'
-              }`}>
-                {message.role === 'assistant' ? 'AI' : 'Y'}
-              </div>
-              <div className="flex-1 min-w-0">
-                {message.parts.map((part, index) => {
-                  if (part.type === 'text' && part.content) {
-                    return (
-                      <div
-                        className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
-                        key={index}
-                      >
-                        <Streamdown>{part.content}</Streamdown>
-                      </div>
-                    )
-                  }
-                  return null
-                })}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function ChatPage() {
-  const [input, setInput] = useState('')
-  const { messages, sendMessage, isLoading, stop } = useAIChat()
-
-  return (
-    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
-      <div className="flex-1 flex flex-col min-h-0">
-        {messages.length === 0 && (
-          <div className="flex-1 flex items-center justify-center px-4">
-            <div className="text-center max-w-3xl mx-auto w-full">
-              <h1 className="text-4xl font-bold mb-4 text-white">
-                Weather Chat
-              </h1>
-              <p className="text-gray-400 mb-6">
-                Ask me about the weather! Try "What's the weather in Paris?"
-              </p>
-            </div>
-          </div>
-        )}
-        <Messages messages={messages} />
-
-        <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
-          <div className="max-w-3xl mx-auto w-full px-4 py-3">
-            {isLoading && (
-              <div className="flex items-center justify-center mb-3">
-                <button
-                  onClick={stop}
-                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
-                >
-                  <Square className="w-4 h-4 fill-current" />
-                  Stop
-                </button>
-              </div>
-            )}
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-                if (input.trim()) {
-                  sendMessage(input)
-                  setInput('')
-                }
-              }}
-            >
-              <div className="relative max-w-xl mx-auto flex items-center gap-2">
-                <input
-                  type="text"
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Ask about the weather..."
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 px-4 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50"
-                  disabled={isLoading}
-                />
-                <button
-                  type="submit"
-                  disabled={!input.trim() || isLoading}
-                  className="p-3 bg-orange-500 hover:bg-orange-600 disabled:bg-gray-600 text-white rounded-lg transition-colors"
-                >
-                  <Send className="w-4 h-4" />
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const Route = createFileRoute('/chat')({
-  component: ChatPage,
-})