create-featurebased-architecture 1.0.0 → 1.0.1

package/templates/ollama-chatbot-backend/src/features/conversations/routes.ts

@@ -0,0 +1,11 @@
+import { Hono } from "hono";
+import { conversationController } from "./controller";
+
+export const conversationRoutes = new Hono();
+
+conversationRoutes.get("/", conversationController.getAll);
+conversationRoutes.get("/:id", conversationController.getById);
+conversationRoutes.get("/:id/messages", conversationController.getMessages);
+conversationRoutes.post("/", conversationController.create);
+conversationRoutes.put("/:id", conversationController.updateTitle);
+conversationRoutes.delete("/:id", conversationController.delete);

package/templates/ollama-chatbot-backend/src/features/conversations/schema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const createConversationSchema = z.object({
+  title: z.string().min(1, "Title is required").max(200, "Title too long"),
+});
+
+export const conversationIdSchema = z.object({
+  id: z.string().uuid("Invalid conversation ID"),
+});

package/templates/ollama-chatbot-backend/src/features/conversations/service.ts

@@ -0,0 +1,28 @@
+import { conversationRepository } from "./repository";
+import type { Conversation, Message, CreateConversationDto } from "./types";
+
+export const conversationService = {
+  async getAllConversations(): Promise<Conversation[]> {
+    return conversationRepository.findAll();
+  },
+
+  async getConversationById(id: string): Promise<Conversation | null> {
+    return conversationRepository.findById(id);
+  },
+
+  async createConversation(data: CreateConversationDto): Promise<Conversation> {
+    return conversationRepository.create(data);
+  },
+
+  async updateConversationTitle(id: string, title: string): Promise<Conversation | null> {
+    return conversationRepository.updateTitle(id, title);
+  },
+
+  async deleteConversation(id: string): Promise<boolean> {
+    return conversationRepository.delete(id);
+  },
+
+  async getConversationMessages(conversationId: string): Promise<Message[]> {
+    return conversationRepository.getMessages(conversationId);
+  },
+};

package/templates/ollama-chatbot-backend/src/features/conversations/types.ts

@@ -0,0 +1,23 @@
+export interface Conversation {
+  id: string;
+  title: string;
+  created_at: Date;
+  updated_at: Date;
+}
+
+export interface Message {
+  id: string;
+  conversation_id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  created_at: Date;
+}
+
+export interface CreateConversationDto {
+  title: string;
+}
+
+export interface AddMessageDto {
+  role: "user" | "assistant" | "system";
+  content: string;
+}

package/templates/ollama-chatbot-backend/src/index.ts

@@ -0,0 +1,22 @@
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { env } from "./config/env";
+import { appRouter } from "./routes";
+
+const app = new Hono();
+
+// Middleware
+app.use("*", logger());
+app.use("*", cors());
+
+// Routes
+app.route("/api", appRouter);
+
+// Health check
+app.get("/health", (c) => c.json({ status: "ok", timestamp: new Date().toISOString() }));
+
+export default {
+  port: env.PORT,
+  fetch: app.fetch,
+};

package/templates/ollama-chatbot-backend/src/routes/index.ts

@@ -0,0 +1,10 @@
+import { Hono } from "hono";
+import { chatRoutes } from "../features/chat/routes";
+import { conversationRoutes } from "../features/conversations/routes";
+
+export const appRouter = new Hono();
+
+appRouter.route("/chat", chatRoutes);
+appRouter.route("/conversations", conversationRoutes);
+
+appRouter.get("/", (c) => c.json({ message: "Ollama Chatbot API" }));

package/templates/ollama-chatbot-backend/src/shared/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./utils";

package/templates/ollama-chatbot-backend/src/shared/types/index.ts

@@ -0,0 +1,16 @@
+// Shared types across features
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export interface PaginatedResponse<T> extends ApiResponse<T[]> {
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}

package/templates/ollama-chatbot-backend/src/shared/utils/index.ts

@@ -0,0 +1 @@
+export * from "./response";

package/templates/ollama-chatbot-backend/src/shared/utils/response.ts

@@ -0,0 +1,10 @@
+import type { Context } from "hono";
+import type { ApiResponse } from "../types";
+
+export function successResponse<T>(c: Context, data: T, message?: string, status = 200) {
+  return c.json<ApiResponse<T>>({ success: true, data, message }, status);
+}
+
+export function errorResponse(c: Context, error: string, status = 400) {
+  return c.json<ApiResponse<never>>({ success: false, error }, status);
+}

package/templates/ollama-chatbot-backend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@/features/*": ["src/features/*"],
+      "@/shared/*": ["src/shared/*"],
+      "@/config/*": ["src/config/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/ollama-chatbot-frontend/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000/api

package/templates/ollama-chatbot-frontend/README.md

@@ -0,0 +1,65 @@
+# {{PROJECT_NAME}}
+
+An Ollama Chatbot frontend with feature-based architecture using React, Vite, and react-icons.
+
+## Project Structure
+
+```
+src/
+├── config/           # Configuration
+├── features/
+│   └── chat/
+│       ├── components/
+│       ├── hooks/
+│       ├── services/
+│       ├── types.ts
+│       └── index.ts
+├── shared/
+│   └── components/
+├── App.tsx
+├── main.tsx
+└── index.css
+```
+
+## Getting Started
+
+```bash
+# Install dependencies
+bun install
+
+# Copy environment file
+cp .env.example .env
+
+# Run development server
+bun run dev
+```
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `VITE_API_URL` | Backend API URL (default: http://localhost:3000/api) |
+
+## Features
+
+- Real-time chat with streaming responses
+- Conversation history
+- Create new conversations
+- Delete conversations
+- Dark theme UI
+
+## Backend
+
+This frontend requires the **Ollama Chatbot Backend** to be running. Generate both templates and run the backend first.
+
+## Customization
+
+### Changing the Model
+
+The model is configured in the backend. Update the `.env` file in your backend project:
+
+```env
+OLLAMA_MODEL=llama3:70b-cloud
+```
+
+Or pass a specific model per request in the frontend by modifying the `sendMessage` call in `useChat.ts`.

package/templates/ollama-chatbot-frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}} - Chatbot</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ollama-chatbot-frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bunx --bun vite",
+    "build": "bunx --bun vite build",
+    "preview": "bunx --bun vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "react-icons": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/ollama-chatbot-frontend/src/App.tsx

@@ -0,0 +1,17 @@
+import { Routes, Route } from "react-router-dom";
+import { ChatPage } from "./features/chat";
+import { Sidebar } from "./shared/components";
+
+export function App() {
+  return (
+    <div className="app-container">
+      <Sidebar />
+      <main className="main-content">
+        <Routes>
+          <Route path="/" element={<ChatPage />} />
+          <Route path="/chat/:conversationId" element={<ChatPage />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

package/templates/ollama-chatbot-frontend/src/config/env.ts

@@ -0,0 +1 @@
+export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";

package/templates/ollama-chatbot-frontend/src/config/index.ts

@@ -0,0 +1 @@
+export * from "./env";

package/templates/ollama-chatbot-frontend/src/features/chat/components/ChatPage.tsx

@@ -0,0 +1,94 @@
+import { useState, useRef, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { IoSend } from "react-icons/io5";
+import { FaRobot, FaUser } from "react-icons/fa";
+import { RiChatNewLine } from "react-icons/ri";
+import { useChat } from "../hooks/useChat";
+
+export function ChatPage() {
+  const { conversationId } = useParams();
+  const { messages, loading, streaming, sendMessage } = useChat(conversationId);
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || streaming) return;
+    sendMessage(input);
+    setInput("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  if (loading && messages.length === 0) {
+    return (
+      <div className="chat-container">
+        <div className="empty-state">
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="chat-container">
+      <div className="chat-messages">
+        {messages.length === 0 ? (
+          <div className="empty-state">
+            <RiChatNewLine className="empty-state-icon" />
+            <h2>Start a conversation</h2>
+            <p>Send a message to begin chatting with the AI assistant</p>
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <div key={msg.id} className={`message ${msg.role}`}>
+              <div className="message-avatar">
+                {msg.role === "user" ? <FaUser size={16} /> : <FaRobot size={16} />}
+              </div>
+              <div className="message-content">
+                {msg.content || (
+                  <div className="typing-indicator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input-container">
+        <form onSubmit={handleSubmit} className="chat-input-wrapper">
+          <textarea
+            className="chat-input"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type your message..."
+            rows={1}
+            disabled={streaming}
+          />
+          <button type="submit" className="send-btn" disabled={!input.trim() || streaming}>
+            <IoSend size={18} />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/ollama-chatbot-frontend/src/features/chat/components/index.ts

@@ -0,0 +1 @@
+export * from "./ChatPage";

package/templates/ollama-chatbot-frontend/src/features/chat/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useChat";

package/templates/ollama-chatbot-frontend/src/features/chat/hooks/useChat.ts

@@ -0,0 +1,149 @@
+import { useState, useEffect, useCallback } from "react";
+import { chatService } from "../services/chatService";
+import type { Conversation, Message } from "../types";
+
+export function useChat(conversationId?: string) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [currentConversationId, setCurrentConversationId] = useState<string | undefined>(conversationId);
+  const [loading, setLoading] = useState(false);
+  const [streaming, setStreaming] = useState(false);
+
+  // Load conversations
+  const loadConversations = useCallback(async () => {
+    try {
+      const data = await chatService.getConversations();
+      setConversations(data);
+    } catch (error) {
+      console.error("Failed to load conversations:", error);
+    }
+  }, []);
+
+  // Load messages for a conversation
+  const loadMessages = useCallback(async (convId: string) => {
+    try {
+      setLoading(true);
+      const data = await chatService.getMessages(convId);
+      setMessages(data);
+      setCurrentConversationId(convId);
+    } catch (error) {
+      console.error("Failed to load messages:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Send message
+  const sendMessage = useCallback(async (content: string, useStream = true) => {
+    if (!content.trim()) return;
+
+    // Add user message optimistically
+    const userMessage: Message = {
+      id: `temp-${Date.now()}`,
+      conversation_id: currentConversationId || "",
+      role: "user",
+      content,
+      created_at: new Date().toISOString(),
+    };
+    setMessages((prev) => [...prev, userMessage]);
+
+    if (useStream) {
+      setStreaming(true);
+      let assistantMessage: Message = {
+        id: `temp-assistant-${Date.now()}`,
+        conversation_id: currentConversationId || "",
+        role: "assistant",
+        content: "",
+        created_at: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      try {
+        for await (const chunk of chatService.streamMessage({
+          message: content,
+          conversationId: currentConversationId,
+        })) {
+          if (chunk.conversationId && !currentConversationId) {
+            setCurrentConversationId(chunk.conversationId);
+          }
+          assistantMessage = { ...assistantMessage, content: assistantMessage.content + chunk.content };
+          setMessages((prev) => [...prev.slice(0, -1), assistantMessage]);
+        }
+        loadConversations();
+      } catch (error) {
+        console.error("Stream error:", error);
+        setMessages((prev) => prev.slice(0, -1));
+      } finally {
+        setStreaming(false);
+      }
+    } else {
+      setLoading(true);
+      try {
+        const response = await chatService.sendMessage({
+          message: content,
+          conversationId: currentConversationId,
+        });
+
+        if (!currentConversationId) {
+          setCurrentConversationId(response.conversationId);
+        }
+
+        const assistantMessage: Message = {
+          id: `assistant-${Date.now()}`,
+          conversation_id: response.conversationId,
+          role: "assistant",
+          content: response.message,
+          created_at: new Date().toISOString(),
+        };
+        setMessages((prev) => [...prev, assistantMessage]);
+        loadConversations();
+      } catch (error) {
+        console.error("Send error:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [currentConversationId, loadConversations]);
+
+  // Delete conversation
+  const deleteConversation = useCallback(async (id: string) => {
+    try {
+      await chatService.deleteConversation(id);
+      setConversations((prev) => prev.filter((c) => c.id !== id));
+      if (id === currentConversationId) {
+        setMessages([]);
+        setCurrentConversationId(undefined);
+      }
+    } catch (error) {
+      console.error("Failed to delete:", error);
+    }
+  }, [currentConversationId]);
+
+  // New chat
+  const startNewChat = useCallback(() => {
+    setMessages([]);
+    setCurrentConversationId(undefined);
+  }, []);
+
+  useEffect(() => {
+    loadConversations();
+  }, [loadConversations]);
+
+  useEffect(() => {
+    if (conversationId) {
+      loadMessages(conversationId);
+    }
+  }, [conversationId, loadMessages]);
+
+  return {
+    messages,
+    conversations,
+    currentConversationId,
+    loading,
+    streaming,
+    sendMessage,
+    deleteConversation,
+    startNewChat,
+    loadMessages,
+  };
+}

package/templates/ollama-chatbot-frontend/src/features/chat/index.ts

@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./services";
+export * from "./types";

package/templates/ollama-chatbot-frontend/src/features/chat/services/chatService.ts

@@ -0,0 +1,81 @@
+import { API_URL } from "../../config/env";
+import type { Conversation, Message, ChatRequest, ChatResponse, ApiResponse } from "./types";
+
+export const chatService = {
+  // Conversations
+  async getConversations(): Promise<Conversation[]> {
+    const res = await fetch(`${API_URL}/conversations`);
+    const data: ApiResponse<Conversation[]> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data || [];
+  },
+
+  async getConversation(id: string): Promise<Conversation> {
+    const res = await fetch(`${API_URL}/conversations/${id}`);
+    const data: ApiResponse<Conversation> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data!;
+  },
+
+  async getMessages(conversationId: string): Promise<Message[]> {
+    const res = await fetch(`${API_URL}/conversations/${conversationId}/messages`);
+    const data: ApiResponse<Message[]> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data || [];
+  },
+
+  async deleteConversation(id: string): Promise<void> {
+    const res = await fetch(`${API_URL}/conversations/${id}`, { method: "DELETE" });
+    const data: ApiResponse<null> = await res.json();
+    if (!data.success) throw new Error(data.error);
+  },
+
+  // Chat
+  async sendMessage(request: ChatRequest): Promise<ChatResponse> {
+    const res = await fetch(`${API_URL}/chat`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request),
+    });
+    const data: ApiResponse<ChatResponse> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data!;
+  },
+
+  // Stream chat
+  async *streamMessage(request: ChatRequest): AsyncGenerator<{ content: string; conversationId: string }> {
+    const res = await fetch(`${API_URL}/chat/stream`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request),
+    });
+
+    if (!res.ok) throw new Error("Failed to stream");
+
+    const reader = res.body?.getReader();
+    if (!reader) throw new Error("No reader");
+
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            yield data;
+          } catch {
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+  },
+};

package/templates/ollama-chatbot-frontend/src/features/chat/services/index.ts

@@ -0,0 +1 @@
+export * from "./chatService";

package/templates/ollama-chatbot-frontend/src/features/chat/types.ts

@@ -0,0 +1,33 @@
+export interface Conversation {
+  id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Message {
+  id: string;
+  conversation_id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  created_at: string;
+}
+
+export interface ChatRequest {
+  message: string;
+  conversationId?: string;
+  model?: string;
+}
+
+export interface ChatResponse {
+  message: string;
+  conversationId: string;
+  model: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}