Val Town Code SearchReturn to Val Town

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { getRecentMessages, createMessage } from "../database/queries.ts";
3import type { ChatMessage, ApiResponse } from "../../shared/types.ts";
4
5const chat = new Hono();
9  try {
10    const messages = await getRecentMessages(50);
11    const response: ApiResponse<ChatMessage[]> = {
12      success: true,
13      data: messages
15    return c.json(response);
16  } catch (error) {
17    const response: ApiResponse<ChatMessage[]> = {
18      success: false,
19      error: "Failed to fetch messages"
30    // Basic validation
31    if (!messageData.username || !messageData.message) {
32      const response: ApiResponse<ChatMessage> = {
33        success: false,
34        error: "Username and message are required"
40    const trimmedMessage = messageData.message.trim();
41    if (trimmedMessage.length === 0) {
42      const response: ApiResponse<ChatMessage> = {
43        success: false,
44        error: "Message cannot be empty"
48
49    if (trimmedMessage.length > 500) {
50      const response: ApiResponse<ChatMessage> = {
51        success: false,
52        error: "Message too long (max 500 characters)"
58    const trimmedUsername = messageData.username.trim();
59    if (trimmedUsername.length === 0 || trimmedUsername.length > 50) {
60      const response: ApiResponse<ChatMessage> = {
61        success: false,
62        error: "Username must be 1-50 characters"
70    });
71
72    const response: ApiResponse<ChatMessage> = {
73      success: true,
74      data: newMessage
76    return c.json(response, 201);
77  } catch (error) {
78    const response: ApiResponse<ChatMessage> = {
79      success: false,
80      error: "Failed to send message"

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { getAllJobs, createJob, deleteJob } from "../database/queries.ts";
3import type { Job, ApiResponse } from "../../shared/types.ts";
4
5const jobs = new Hono();
9  try {
10    const jobList = await getAllJobs();
11    const response: ApiResponse<Job[]> = {
12      success: true,
13      data: jobList
15    return c.json(response);
16  } catch (error) {
17    const response: ApiResponse<Job[]> = {
18      success: false,
19      error: "Failed to fetch jobs"
31    if (!jobData.title || !jobData.company || !jobData.description || 
32        !jobData.location || !jobData.contact_email) {
33      const response: ApiResponse<Job> = {
34        success: false,
35        error: "Missing required fields"
41    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
42    if (!emailRegex.test(jobData.contact_email)) {
43      const response: ApiResponse<Job> = {
44        success: false,
45        error: "Invalid email format"
49
50    const newJob = await createJob(jobData);
51    const response: ApiResponse<Job> = {
52      success: true,
53      data: newJob
55    return c.json(response, 201);
56  } catch (error) {
57    const response: ApiResponse<Job> = {
58      success: false,
59      error: "Failed to create job"
68    const id = parseInt(c.req.param("id"));
69    if (isNaN(id)) {
70      const response: ApiResponse<boolean> = {
71        success: false,
72        error: "Invalid job ID"
77    const deleted = await deleteJob(id);
78    if (!deleted) {
79      const response: ApiResponse<boolean> = {
80        success: false,
81        error: "Job not found"
84    }
85
86    const response: ApiResponse<boolean> = {
87      success: true,
88      data: true
90    return c.json(response);
91  } catch (error) {
92    const response: ApiResponse<boolean> = {
93      success: false,
94      error: "Failed to delete job"

20  const fetchOrders = async () => {
21    try {
22      const response = await fetch('/api/orders');
23      const result = await response.json();
24      if (result.success) {

19}
20
21export interface ApiResponse<T> {
22  success: boolean;
23  data?: T;

17│   │   └── queries.ts       # Database query functions
18│   ├── routes/
19│   │   ├── jobs.ts         # Job posting API routes
20│   │   └── chat.ts         # Chat API routes
21│   └── index.ts            # Main Hono server
22├── frontend/
32```
33
34## API Endpoints
35
36### Jobs
37- `GET /api/jobs` - Get all job postings
38- `POST /api/jobs` - Create a new job posting
39- `DELETE /api/jobs/:id` - Delete a job posting
40
41### Chat
42- `GET /api/chat/messages` - Get recent chat messages
43- `POST /api/chat/messages` - Send a new chat message
44
45## Database Schema

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import type { CreateOrderRequest, ApiResponse, Order, Product } from '../../shared/types.ts';
4
5export default function ClientOrderForm() {
23
24  const productCategories = ['Fish', 'Poultry', 'Feed'] as const;
25  const fishTypes = ['Catfish', 'Tilapia'] as const;
26  const productForms = ['Fresh', 'Frozen', 'Live', 'Fillet', 'Smoked', 'Dried'] as const;
27  const poultryTypes = ['Chicken (Whole)', 'Chicken (Parts)', 'Turkey', 'Guinea Fowl'] as const;
41  const fetchProducts = async () => {
42    try {
43      const response = await fetch('/api/products');
44      const result: ApiResponse<Product[]> = await response.json();
45      if (result.success && result.data) {
46        setProducts(result.data);
110
111    try {
112      const response = await fetch('/api/orders', {
113        method: 'POST',
114        headers: {
118      });
119
120      const result: ApiResponse<Order> = await response.json();
121
122      if (result.success && result.data) {

86  /* Anthropic SDK instance – memoised so we don't recreate each render */
87  const anthropic = React.useMemo(() => {
88    if (!config.anthropicApiKey) return null;
89    return new Anthropic({
90      dangerouslyAllowBrowser: true,
91      apiKey: config.anthropicApiKey,
92      baseURL: "https://api.anthropic.com", // explicit so it works with CORS pre‑flights
93      defaultHeaders: {
94        "anthropic-version": "2023-06-01",
95        // Allow calling the API directly from the browser – you accept the risk!
96        "anthropic-dangerous-direct-browser-access": "true",
97      },
98    });
99  }, [config.anthropicApiKey]);
100
101  /* Abort helper */
110  const send = React.useCallback(
111    async (history: Message[], userText: string): Promise<AssistantMsg> => {
112      if (!anthropic) throw new Error("API key missing");
113      if (status !== "idle") throw new Error("Stream already in progress");
114
135        })) as AsyncIterable<MessageStreamEvent>;
136      } catch (err: any) {
137        console.error("Failed to call Anthropic API", err);
138        throw err;
139      }

112  model: string;
113  max_tokens: number;
114  anthropic_api_key: string;
115  mcp_servers?: Array<{
116    type: string;

179  /** Retry a user message */
180  const retryMessage = async (messageId: string) => {
181    if (status !== "idle" || !config.anthropicApiKey) return;
182
183    const userText = onRetryFromMessage(messageId);
202  /** Dispatch user input */
203  const fireSend = async () => {
204    if (!input.trim() || status !== "idle" || !config.anthropicApiKey) return;
205
206    const userText = input.trim();
309  };
310
311  const canSend = input.trim() && status === "idle" && config.anthropicApiKey;
312
313  /* ── UI ─────────────────────────────────────────────────────── */
315    <>
316      <div className="chat-messages">
317        {!config.anthropicApiKey && (
318          <div className="message system">
319            Please configure your Anthropic API key in settings to start chatting
320          </div>
321        )}
383            }}
384            onKeyDown={handleKeyDown}
385            placeholder={config.anthropicApiKey
386              ? streaming
387                ? "Press Enter to stop streaming…"
388                : "Type your message…"
389              : "Configure API key in settings first"}
390            className="chat-input"
391            disabled={!config.anthropicApiKey || thinking}
392            rows={1}
393          />

18
19export default function Settings({ config, onUpdateConfig, onClose }: SettingsProps) {
20  const [apiKey, setApiKey] = useState(config.anthropicApiKey);
21  const [mcpServers, setMcpServers] = useState<MCPServer[]>(config.mcpServers);
22  const [selectedModel, setSelectedModel] = useState(config.selectedModel);
37  const handleSave = () => {
38    onUpdateConfig({
39      anthropicApiKey: apiKey,
40      mcpServers: mcpServers,
41      selectedModel: selectedModel,
141        </div>
142
143        {/* API Key Section */}
144        <div className="form-group">
145          <label className="form-label">Anthropic API Key</label>
146          <input
147            type="password"
148            value={apiKey}
149            onChange={(e) => setApiKey(e.target.value)}
150            placeholder="sk-ant-..."
151            className="form-input"
152          />
153          <div className="text-sm text-gray-600 mt-1">
154            Get your API key from{" "}
155            <a
156              href="https://console.anthropic.com/"