@ramme-io/create-app 1.0.5 → 1.1.2

package/template/src/components/AIChatWidget.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { 
+  Card, 
+  Conversation, 
+  Message, 
+  PromptInput, 
+  Button,
+  Icon,
+} from '@ramme-io/ui';
+import { useMockChat } from '../hooks/useMockChat';
+
+interface AIChatWidgetProps {
+  onClose: () => void;
+}
+
+export const AIChatWidget: React.FC<AIChatWidgetProps> = ({ onClose }) => {
+  // 1. Use the shared "Brain"
+  const { messages, isLoading, sendMessage } = useMockChat();
+  const [input, setInput] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage(input);
+    setInput('');
+  };
+
+  return (
+    <Card className="fixed bottom-24 right-6 w-96 h-[500px] shadow-2xl flex flex-col z-50 animate-in slide-in-from-bottom-5 border-border">
+      
+      {/* Header */}
+      <div className="p-4 border-b flex justify-between items-center bg-muted/50 rounded-t-lg">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+          <span className="font-semibold text-sm">Bodewell AI</span>
+        </div>
+        <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
+          <Icon name="x" size={16} />
+        </Button>
+      </div>
+
+      {/* Chat History Area */}
+      <div className="flex-1 overflow-hidden p-0 bg-background">
+        <Conversation>
+          {messages.map((msg) => (
+            <Message
+              key={msg.id}
+              author={msg.author}
+              content={msg.content}
+              isUser={msg.isUser}
+              suggestions={msg.suggestions}
+              onSuggestionClick={(s) => sendMessage(s)}
+            />
+          ))}
+          {isLoading && <Message author="Bodewell AI" isUser={false} loading />}
+        </Conversation>
+      </div>
+
+      {/* Input Footer */}
+      <div className="p-4 border-t bg-card">
+        <PromptInput
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onSubmit={handleSubmit}
+          placeholder="Ask to adjust temperature..."
+        />
+      </div>
+    </Card>
+  );
+};

package/template/src/components/AppHeader.tsx

@@ -22,7 +22,7 @@ import {
 import { useAuth } from '../contexts/AuthContext';
 
 // --- STRATEGIC IMPORTS ---
-import { appManifest } from '../config/app.manifest';
+import { appManifest } from '../config/navigation';
 import type { ManifestLink } from '../core/manifest-types';
 import TemplateSwitcher from './TemplateSwitcher';
 import rammeLogo from '../assets/orange.png'; // <-- 1. IMPORT THE LOGO

package/template/src/config/app.manifest.ts

@@ -1,86 +1,55 @@
+import type { AppSpecification } from '../types/schema';
+
 /**
- * @file app.manifest.ts
- * @repository ramme-app-starter
- * @description
- * This is the central manifest for all GLOBAL, shared navigation elements.
- * Corrected paths to point within the /settings layout.
+ * ------------------------------------------------------------------
+ * THE APP MANIFEST (The "Brain")
+ * ------------------------------------------------------------------
+ * This file is the Single Source of Truth for the application's
+ * domain logic. It defines the signals (data), entities (things),
+ * and global configuration.
+ * * In the "App Builder" workflow, this file is programmatically 
+ * generated by the AI Assistant.
  */
-import type { ManifestLink } from '../core/manifest-types';
 
-interface AppManifest {
-  userMenu: ManifestLink[];
-  settingsMenu: ManifestLink[];
-  footerLinks: ManifestLink[];
-}
+export const appManifest: AppSpecification = {
+  meta: {
+    name: "My Ramme App",
+    version: "0.1.0",
+    description: "A prototype application generated by Ramme.",
+    author: "Ramme User",
+    createdAt: new Date().toISOString(),
+  },
 
-export const appManifest: AppManifest = {
-  /**
-   * Used for the user dropdown menu in the AppHeader.
-   * NOTE: Logout is handled by the onClick={logout} in AppHeader,
-   * so it's removed from this manifest.
-   */
-  userMenu: [
-    {
-      id: 'user.profile',
-      // --- FIX: Point to the settings layout ---
-      path: '/settings/profile', // Correct path
-      title: 'Your Profile',
-      icon: 'user',
-    },
-    {
-      id: 'user.settings',
-      // --- FIX: Point to the settings layout base ---
-      path: '/settings', // Correct path
-      title: 'Settings',
-      icon: 'settings',
-    },
-    // --- REMOVED: Logout link is redundant ---
-    // {
-    //   id: 'user.logout',
-    //   path: '/login', // Was pointing here, but onClick is better
-    //   title: 'Log Out',
-    //   icon: 'logOut',
-    // },
-  ],
+  // The Data Layer
+  domain: {
+    // 1. Signals: The raw data points (Sensors, Statuses, Commands)
+    signals: [
+      // Example placeholder:
+      // {
+      //   id: 'temp_01',
+      //   label: 'Living Room Temp',
+      //   kind: 'sensor',
+      //   source: 'mock',
+      //   unit: '°C',
+      //   defaultValue: 22
+      // }
+    ],
 
-  /**
-   * Used for a dedicated settings page (e.g., /settings/...)
-   * These paths were already correct.
-   */
-  settingsMenu: [
-    {
-      id: 'settings.account',
-      path: '/settings/profile',
-      title: 'Account',
-      icon: 'user',
-    },
-    {
-      id: 'settings.billing',
-      path: '/settings/billing',
-      title: 'Billing',
-      icon: 'creditCard',
-    },
-    {
-      id: 'settings.team',
-      path: '/settings/team',
-      title: 'Team Members',
-      icon: 'users',
-    },
-  ],
+    // 2. Entities: The logical groupings (Devices, Rooms, Systems)
+    entities: [
+      // Example placeholder:
+      // {
+      //   id: 'dev_thermostat',
+      //   name: 'Smart Thermostat',
+      //   type: 'device',
+      //   signals: ['temp_01']
+      // }
+    ],
+  },
 
-  /**
-   * Used in the AppFooter. (Placeholders)
-   */
-  footerLinks: [
-    {
-      id: 'footer.help',
-      path: '/help',
-      title: 'Help Center',
-    },
-    {
-      id: 'footer.terms',
-      path: '/terms',
-      title: 'Terms of Service',
-    },
-  ],
+  // Global Config
+  config: {
+    theme: 'system',
+    mockMode: true, // Default to "Mock Mode" for instant prototyping
+  },
 };

package/template/src/config/navigation.ts

@@ -0,0 +1,86 @@
+/**
+ * @file navigation.ts
+ * @repository ramme-app-starter
+ * @description
+ * This is the central manifest for all GLOBAL, shared navigation elements.
+ * Corrected paths to point within the /settings layout.
+ */
+import type { ManifestLink } from '../core/manifest-types';
+
+interface AppManifest {
+  userMenu: ManifestLink[];
+  settingsMenu: ManifestLink[];
+  footerLinks: ManifestLink[];
+}
+
+export const appManifest: AppManifest = {
+  /**
+   * Used for the user dropdown menu in the AppHeader.
+   * NOTE: Logout is handled by the onClick={logout} in AppHeader,
+   * so it's removed from this manifest.
+   */
+  userMenu: [
+    {
+      id: 'user.profile',
+      // --- FIX: Point to the settings layout ---
+      path: '/settings/profile', // Correct path
+      title: 'Your Profile',
+      icon: 'user',
+    },
+    {
+      id: 'user.settings',
+      // --- FIX: Point to the settings layout base ---
+      path: '/settings', // Correct path
+      title: 'Settings',
+      icon: 'settings',
+    },
+    // --- REMOVED: Logout link is redundant ---
+    // {
+    //   id: 'user.logout',
+    //   path: '/login', // Was pointing here, but onClick is better
+    //   title: 'Log Out',
+    //   icon: 'logOut',
+    // },
+  ],
+
+  /**
+   * Used for a dedicated settings page (e.g., /settings/...)
+   * These paths were already correct.
+   */
+  settingsMenu: [
+    {
+      id: 'settings.account',
+      path: '/settings/profile',
+      title: 'Account',
+      icon: 'user',
+    },
+    {
+      id: 'settings.billing',
+      path: '/settings/billing',
+      title: 'Billing',
+      icon: 'creditCard',
+    },
+    {
+      id: 'settings.team',
+      path: '/settings/team',
+      title: 'Team Members',
+      icon: 'users',
+    },
+  ],
+
+  /**
+   * Used in the AppFooter. (Placeholders)
+   */
+  footerLinks: [
+    {
+      id: 'footer.help',
+      path: '/help',
+      title: 'Help Center',
+    },
+    {
+      id: 'footer.terms',
+      path: '/terms',
+      title: 'Terms of Service',
+    },
+  ],
+};

package/template/src/hooks/useMockChat.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback } from 'react';
+import { useToast } from '@ramme-io/ui';
+
+export interface ChatMessage {
+  id: string;
+  author: string;
+  content: string;
+  isUser: boolean;
+  suggestions?: string[];
+  loading?: boolean;
+}
+
+export const useMockChat = () => {
+  // 1. FIX: Destructure 'addToast' (the correct name from your Provider)
+  const { addToast } = useToast(); 
+  
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    { 
+      id: '1', 
+      author: 'Bodewell AI', 
+      content: 'Hello! I am monitoring your 12 active devices. How can I help?', 
+      isUser: false, 
+      suggestions: ['Check System Status', 'Turn off Living Room AC']
+    }
+  ]);
+
+  const sendMessage = useCallback((content: string) => {
+    if (!content.trim()) return;
+
+    // Add User Message
+    const userMsg = { id: Date.now().toString(), author: 'You', content, isUser: true };
+    setMessages(prev => [...prev, userMsg]);
+    setIsLoading(true);
+
+    // Simulate AI Delay
+    setTimeout(() => {
+      setIsLoading(false);
+      
+      // Mock Response Logic
+      const aiMsg = {
+        id: (Date.now() + 1).toString(),
+        author: 'Bodewell AI',
+        content: `I received your command: "${content}". Executing protocol...`,
+        isUser: false,
+        suggestions: ['View Logs', 'Undo Action']
+      };
+      
+      setMessages(prev => [...prev, aiMsg]);
+      
+      // 2. FIX: Call addToast with separate arguments, not an object
+      // Signature: addToast(message, type, duration)
+      if (addToast) {
+        addToast(
+          `Successfully processed: ${content}`, // message
+          'success',                            // type
+          3000                                  // duration
+        );
+      }
+      
+    }, 1500);
+  }, [addToast]);
+
+  return {
+    messages,
+    isLoading,
+    sendMessage
+  };
+};

package/template/src/hooks/useSignal.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import type { Signal } from '../types/signal';
+
+/**
+ * Configuration for the Mock Generator.
+ * This allows us to simulate specific hardware constraints.
+ */
+interface SignalConfig<T> {
+  initialValue?: T;
+  min?: number;     // Prevent drifting too low
+  max?: number;     // Prevent drifting too high
+  interval?: number; // Update speed (ms)
+  unit?: string;     // e.g., "°F", "%", "RPM"
+}
+
+/**
+ * The "Universal Socket." 
+ * UI Components use this hook to subscribe to data.
+ * Currently running in "Synthetic Mode" (Mock) with bounded randomization.
+ */
+export function useSignal<T = any>(signalId: string, config: SignalConfig<T> = {}): Signal<T> {
+  // Defaults
+  const { 
+    initialValue, 
+    min = -Infinity, 
+    max = Infinity, 
+    interval = 2000, 
+    unit 
+  } = config;
+
+  // 1. Initialize
+  const [signal, setSignal] = useState<Signal<T>>({
+    id: signalId,
+    value: initialValue as T,
+    unit: unit,
+    timestamp: Date.now(),
+    status: 'fresh',
+  });
+
+  useEffect(() => {
+    // 2. SIMULATION: Generate synthetic data updates
+    const timer = setInterval(() => {
+      setSignal(prev => {
+        let newValue: any = prev.value;
+
+        // Only apply math if it's a number
+        if (typeof prev.value === 'number') {
+            // Generate drift
+            const variance = (Math.random() - 0.5) * 2; // +/- 1
+            let nextNum = prev.value + variance;
+
+            // 🛡️ CLAMPING: Apply the physical bounds
+            if (min !== undefined) nextNum = Math.max(min, nextNum);
+            if (max !== undefined) nextNum = Math.min(max, nextNum);
+
+            newValue = Number(nextNum.toFixed(1));
+        }
+
+        return {
+          ...prev,
+          value: newValue,
+          timestamp: Date.now(),
+          status: 'fresh',
+          unit: unit // Ensure unit persists
+        };
+      });
+    }, interval); 
+
+    return () => clearInterval(timer);
+  }, [signalId, min, max, interval, unit]);
+
+  return signal;
+}

package/template/src/pages/AiChat.tsx

@@ -1,74 +1,60 @@
-// src/pages/AiChat.tsx
-import React, { useState, useEffect } from 'react';
+// ramme-app-starter/template/src/pages/AiChat.tsx
+import React, { useState } from 'react';
 import {
   Card,
   PageHeader,
   Conversation,
   Message,
   PromptInput,
-  type MessageProps,
 } from '@ramme-io/ui';
-
-// The MessageData type now directly uses MessageProps from the library
-type MessageData = Omit<MessageProps, 'onSuggestionClick'>;
+import { useMockChat } from '../hooks/useMockChat'; // <--- The new brain
 
 const AiChat: React.FC = () => {
-  const [messages, setMessages] = useState<MessageData[]>([
-    { author: 'AI Assistant', content: 'Hello! How can I help you build your prototype today?' },
-  ]);
-  const [newMessage, setNewMessage] = useState('');
-
-  const addMessage = (message: MessageData) => {
-    setMessages(prev => [...prev, message]);
-  }
+  const { messages, isLoading, sendMessage } = useMockChat();
+  const [input, setInput] = useState('');
 
-  const handleSendMessage = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (newMessage.trim() === '') return;
-    addMessage({ author: 'User', content: newMessage, isUser: true });
-    setNewMessage('');
+    sendMessage(input);
+    setInput('');
   };
 
-  const handleSuggestionClick = (suggestion: string) => {
-    addMessage({ author: 'User', content: suggestion, isUser: true });
-  }
-
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1];
-    if (lastMessage?.isUser) {
-      addMessage({ author: 'AI Assistant', loading: true });
-
-      setTimeout(() => {
-        setMessages(prev => {
-          const newMessages = [...prev];
-          newMessages[newMessages.length - 1] = {
-            author: 'AI Assistant',
-            content: "That's a great idea! I am a mock AI, but I can certainly help you plan that. What components should be on the dashboard?",
-            suggestions: ["Stat Cards", "A Bar Chart", "A Data Table"]
-          };
-          return newMessages;
-        });
-      }, 1500);
-    }
-  }, [messages]);
-
   return (
-    <div className="p-4 sm:p-6 lg:p-8 space-y-8">
+    <div className="p-4 sm:p-6 lg:p-8 space-y-8 h-[calc(100vh-64px)] flex flex-col">
       <PageHeader
         title="AI Assistant"
-        description="This is the foundational interface for the Ramme AI prototyping assistant."
+        description="Full-screen command center for Ramme AI."
       />
-      <Card className="flex flex-col h-[600px]">
-        <Conversation>
-          {messages.map((msg, index) => (
-            <Message key={index} {...msg} onSuggestionClick={handleSuggestionClick} />
-          ))}
-        </Conversation>
-        <PromptInput
-          value={newMessage}
-          onChange={(e) => setNewMessage(e.target.value)}
-          onSubmit={handleSendMessage}
-        />
+      
+      {/* We use flex-1 on the Card to make it fill the remaining screen space 
+         perfectly, creating that immersive "ChatGPT" feel.
+      */}
+      <Card className="flex-1 flex flex-col min-h-0 shadow-sm border-border/50">
+        <div className="flex-1 overflow-hidden">
+          <Conversation>
+            {messages.map((msg) => (
+              <Message
+                key={msg.id}
+                author={msg.author}
+                content={msg.content}
+                isUser={msg.isUser}
+                loading={msg.loading}
+                suggestions={msg.suggestions}
+                onSuggestionClick={(s) => sendMessage(s)}
+              />
+            ))}
+            {isLoading && <Message author="Bodewell AI" isUser={false} loading />}
+          </Conversation>
+        </div>
+        
+        <div className="p-4 border-t bg-card">
+          <PromptInput
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onSubmit={handleSubmit}
+            placeholder="Type a command or ask a question..."
+          />
+        </div>
       </Card>
     </div>
   );