@igstack/app-catalog-frontend-core 0.2.0 → 0.3.1-alpha-20260305175850

package/src/components/IconPickerField.tsx

@@ -1,88 +0,0 @@
-import { Image, X } from 'lucide-react'
-import { useState } from 'react'
-import { Button } from '~/ui/button'
-import { Label } from '~/ui/label'
-import { IconPickerDialog } from './IconPickerDialog'
-
-interface IconPickerFieldProps {
-  label?: string
-  value?: string
-  onChange: (iconName: string | undefined) => void
-  placeholder?: string
-  required?: boolean
-}
-
-export function IconPickerField({
-  label = 'Icon',
-  value,
-  onChange,
-  placeholder = 'No icon selected',
-  required = false,
-}: IconPickerFieldProps) {
-  const [dialogOpen, setDialogOpen] = useState(false)
-
-  const handleClear = () => {
-    onChange(undefined)
-  }
-
-  return (
-    <div className="space-y-2">
-      {label && (
-        <Label>
-          {label}
-          {required && <span className="text-destructive ml-1">*</span>}
-        </Label>
-      )}
-
-      <div className="flex items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          onClick={() => setDialogOpen(true)}
-          className="flex-1 justify-start"
-        >
-          {value ? (
-            <div className="flex items-center gap-2">
-              <div className="w-6 h-6 flex items-center justify-center">
-                <img
-                  src={`/api/icons/${value}`}
-                  alt={value}
-                  className="max-w-full max-h-full object-contain"
-                  onError={(e) => {
-                    // Fallback if icon not found
-                    e.currentTarget.style.display = 'none'
-                  }}
-                />
-              </div>
-              <span className="truncate">{value}</span>
-            </div>
-          ) : (
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <Image className="h-4 w-4" />
-              <span>{placeholder}</span>
-            </div>
-          )}
-        </Button>
-
-        {value && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={handleClear}
-            title="Clear icon"
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        )}
-      </div>
-
-      <IconPickerDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        onSelect={onChange}
-        selectedIconName={value}
-      />
-    </div>
-  )
-}

package/src/modules/admin-base/components/AdminChat.tsx

@@ -1,122 +0,0 @@
-import { useChat } from '@ai-sdk/react'
-import { DefaultChatTransport } from 'ai'
-import { Send } from 'lucide-react'
-import type { FormEvent } from 'react'
-import { useEffect, useMemo, useRef, useState } from 'react'
-
-import { Button } from '~/ui/button'
-import { Input } from '~/ui/input'
-
-import { useAdminConfig } from '../context/AdminConfigContext'
-import { AdminWelcome } from './AdminWelcome'
-
-export function AdminChat() {
-  const config = useAdminConfig()
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const [input, setInput] = useState('')
-
-  // Use DefaultChatTransport which handles UI message stream format (tool calls, etc.)
-  const transport = useMemo(
-    () => new DefaultChatTransport({ api: config.chatApiUrl }),
-    [config.chatApiUrl],
-  )
-
-  const { messages, sendMessage, status, error } = useChat({
-    transport,
-  })
-
-  const isLoading = status === 'streaming' || status === 'submitted'
-
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    if (!input.trim() || isLoading) {
-      return
-    }
-    sendMessage({ text: input })
-    setInput('')
-  }
-
-  // Extract text content from message parts
-  const getMessageContent = (message: (typeof messages)[0]): string => {
-    return message.parts
-      .filter((part) => part.type === 'text')
-      .map((part) => part.text)
-      .join('')
-  }
-
-  return (
-    <div className="flex flex-col flex-1">
-      {/* Messages area */}
-      <div className="flex-1 overflow-y-auto">
-        {messages.length === 0 ? (
-          <AdminWelcome />
-        ) : (
-          <div className="max-w-3xl mx-auto space-y-4 py-4">
-            {messages.map((message) => (
-              <div
-                key={message.id}
-                className={`flex ${
-                  message.role === 'user' ? 'justify-end' : 'justify-start'
-                }`}
-              >
-                <div
-                  className={`max-w-[80%] rounded-lg px-4 py-2 ${
-                    message.role === 'user'
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted text-foreground'
-                  }`}
-                >
-                  <pre className="whitespace-pre-wrap font-sans text-sm">
-                    {getMessageContent(message)}
-                  </pre>
-                </div>
-              </div>
-            ))}
-            {isLoading && (
-              <div className="flex justify-start">
-                <div className="bg-muted rounded-lg px-4 py-2">
-                  <span className="text-muted-foreground text-sm">
-                    Thinking...
-                  </span>
-                </div>
-              </div>
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-        )}
-      </div>
-
-      {/* Error display */}
-      {error && (
-        <div className="px-4 py-2 bg-destructive/10 border-t border-destructive/20">
-          <p className="text-destructive text-sm">Error: {error.message}</p>
-        </div>
-      )}
-
-      {/* Input area */}
-      <div className="border-t border-border p-4">
-        <form onSubmit={handleSubmit} className="max-w-3xl mx-auto">
-          <div className="flex gap-2">
-            <Input
-              type="text"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder="Type your message..."
-              disabled={isLoading}
-              className="flex-1"
-            />
-            <Button type="submit" disabled={isLoading || !input.trim()}>
-              <Send className="h-4 w-4" />
-              <span className="sr-only">Send</span>
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/src/modules/admin-base/components/AdminLayout.tsx

@@ -1,111 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import {
-  CheckSquare,
-  ChevronLeft,
-  ChevronRight,
-  ImageIcon,
-  LayoutDashboard,
-  MessageSquare,
-} from 'lucide-react'
-import type { ReactNode } from 'react'
-import { useState } from 'react'
-import { cn } from '~/lib/utils'
-import { Button } from '~/ui/button'
-import { Breadcrumbs } from '~/ui/components/Breadcrumbs'
-import { MainLayout } from '~/ui/layout/MainLayout'
-
-export interface AdminLayoutProps {
-  children: ReactNode
-}
-
-interface NavItem {
-  name: string
-  path: string
-  icon: typeof MessageSquare
-}
-
-const navItems: Array<NavItem> = [
-  {
-    name: 'Chat',
-    path: '/admin/chat',
-    icon: MessageSquare,
-  },
-  {
-    name: 'Icons',
-    path: '/admin/icons',
-    icon: ImageIcon,
-  },
-  {
-    name: 'App For Catalog',
-    path: '/admin/app-for-catalog',
-    icon: LayoutDashboard,
-  },
-  {
-    name: 'Approval Methods',
-    path: '/admin/approval-methods',
-    icon: CheckSquare,
-  },
-]
-
-export function AdminLayout({ children }: AdminLayoutProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false)
-
-  return (
-    <MainLayout breadcrumbs={<Breadcrumbs />}>
-      <div className="flex gap-6 -mx-6 -my-6 flex-1">
-        {/* Left sidebar */}
-        <aside
-          className={cn(
-            'flex flex-col transition-all duration-300',
-            isCollapsed ? 'w-16' : 'w-64',
-          )}
-        >
-          <div className="p-4 flex items-center justify-between">
-            {!isCollapsed && <h1 className="text-2xl font-bold">Admin</h1>}
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setIsCollapsed(!isCollapsed)}
-              className={cn('h-8 w-8', isCollapsed && 'mx-auto')}
-            >
-              {isCollapsed ? (
-                <ChevronRight className="h-4 w-4" />
-              ) : (
-                <ChevronLeft className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-          <nav className="flex-1 p-4 space-y-2">
-            {navItems.map((item) => {
-              const Icon = item.icon
-              return (
-                <Link key={item.path} to={item.path} className="block">
-                  {({ isActive }: { isActive: boolean }) => (
-                    <Button
-                      variant="ghost"
-                      className={cn(
-                        'w-full',
-                        isCollapsed ? 'justify-center px-2' : 'justify-start',
-                        isActive &&
-                          'bg-primary text-primary-foreground hover:bg-primary/90',
-                      )}
-                      title={isCollapsed ? item.name : undefined}
-                    >
-                      <Icon className={cn('w-4 h-4', !isCollapsed && 'mr-2')} />
-                      {!isCollapsed && <span>{item.name}</span>}
-                    </Button>
-                  )}
-                </Link>
-              )
-            })}
-          </nav>
-        </aside>
-
-        {/* Main content */}
-        <main className="flex-1 flex flex-col overflow-hidden min-w-0">
-          {children}
-        </main>
-      </div>
-    </MainLayout>
-  )
-}

package/src/modules/admin-base/components/AdminWelcome.tsx

@@ -1,52 +0,0 @@
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '~/ui/card'
-
-export function AdminWelcome() {
-  return (
-    <div className="p-6 max-w-2xl mx-auto">
-      <h1 className="text-2xl font-bold mb-4">Admin Assistant</h1>
-      <p className="text-muted-foreground mb-6">
-        Welcome to the AI-powered admin interface. You can use natural language
-        to manage your application.
-      </p>
-
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>What you can do</CardTitle>
-          <CardDescription>
-            Try these example commands to get started
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="space-y-2 text-sm">
-            <li className="flex items-start gap-2">
-              <span className="text-primary">•</span>
-              <span>Show me contents of the Apps table in DB</span>
-            </li>
-            <li className="flex items-start gap-2">
-              <span className="text-primary">•</span>
-              <span>Add a new app called "Portal" with icon "portal"</span>
-            </li>
-            <li className="flex items-start gap-2">
-              <span className="text-primary">•</span>
-              <span>List all configured data sources</span>
-            </li>
-            <li className="flex items-start gap-2">
-              <span className="text-primary">•</span>
-              <span>Configure a new MCP server</span>
-            </li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      <p className="text-sm text-muted-foreground">
-        Type your request in the chat below to get started.
-      </p>
-    </div>
-  )
-}

package/src/modules/admin-base/context/AdminConfigContext.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react'
-import { createContext, use, useMemo } from 'react'
-
-import type { AdminConfig } from '../types/adminTypes'
-
-const defaultConfig: AdminConfig = {
-  chatApiUrl: '/api/admin/chat',
-}
-
-const AdminConfigContext = createContext<AdminConfig>(defaultConfig)
-
-export interface AdminConfigProviderProps {
-  config?: Partial<AdminConfig>
-  children: ReactNode
-}
-
-export function AdminConfigProvider({
-  config,
-  children,
-}: AdminConfigProviderProps) {
-  const mergedConfig: AdminConfig = useMemo(
-    () => ({
-      ...defaultConfig,
-      ...config,
-    }),
-    [config],
-  )
-
-  return (
-    <AdminConfigContext value={mergedConfig}>{children}</AdminConfigContext>
-  )
-}
-
-export function useAdminConfig(): AdminConfig {
-  return use(AdminConfigContext)
-}

package/src/modules/admin-base/index.ts

@@ -1,16 +0,0 @@
-// Components
-export { AdminChat } from './components/AdminChat'
-export { AdminLayout } from './components/AdminLayout'
-export { AdminWelcome } from './components/AdminWelcome'
-
-// Context
-export {
-    AdminConfigProvider,
-    useAdminConfig,
-    type AdminConfigProviderProps
-} from './context/AdminConfigContext'
-
-// Types
-export type { AdminChatMessage, AdminConfig } from './types/adminTypes'
-
-

package/src/modules/admin-base/types/adminTypes.ts

@@ -1,11 +0,0 @@
-export interface AdminConfig {
-  /** API endpoint for chat - defaults to /api/admin/chat */
-  chatApiUrl?: string
-}
-
-export interface AdminChatMessage {
-  id: string
-  role: 'user' | 'assistant'
-  content: string
-  createdAt?: Date
-}