chat input updates

Author: Gerome-Elassaad

app/globals.css

@@ -6,9 +6,18 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;
+  .animate-spin-slow {
+    animation: spin-slow var(--star-speed, 5s) linear infinite;
+  }
+}
+  @keyframes spin-slow {
+    to {
+      transform: rotate(360deg);
+    }
   }
 }
 

app/page.tsx

@@ -2,7 +2,6 @@
 "use client"
 
 import React from "react"
-import { useRouter } from "next/navigation"
 
 import type { ViewType } from "@/components/auth"
 import { AuthDialog } from "@/components/auth-dialog"
@@ -24,18 +23,8 @@ import type { ExecutionResult } from "@/lib/types"
 import type { DeepPartial } from "ai"
 import { experimental_useObject as useObject } from "ai/react"
 import { usePostHog } from "posthog-js/react"
-import { type SetStateAction, useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useLocalStorage } from "usehooks-ts"
-import posthog from "posthog-js"
-
-const TEMPLATE_IDS = {
-  CODE_INTERPRETER_V1: "code-interpreter-v1",
-  NEXTJS_DEVELOPER: "nextjs-developer",
-  VUE_DEVELOPER: "vue-developer",
-  STREAMLIT_DEVELOPER: "streamlit-developer",
-  GRADIO_DEVELOPER: "gradio-developer",
-  CODINIT_ENGINEER: "codinit-engineer",
-} as const
 
 interface ProjectAnalysis {
   structure: {
@@ -99,14 +88,13 @@ const parseApiError = (error: Error | any): ParsedApiError => {
 }
 
 export default function Home() {
-  const router = useRouter()
   const posthog = usePostHog()
 
   // Auth and session state
   const [isAuthDialogOpen, setAuthDialog] = useState(false)
   const [authView, setAuthView] = useState<ViewType>("sign_in")
   const [authError, setAuthError] = useState<string | null>(null)
-  const { session, isLoading, userTeam, authError: authStateError } = useAuth(setAuthDialog, setAuthView)
+  const { session, isLoading, userTeam } = useAuth(setAuthDialog, setAuthView)
 
   // Chat and UI state
   const [messages, setMessages] = useState<Message[]>([])
@@ -123,6 +111,7 @@ export default function Home() {
   const [errorMessage, setErrorMessage] = useState("")
   const [isRateLimited, setIsRateLimited] = useState(false)
   const [currentRequestId, setCurrentRequestId] = useState<string>("")
+  const [hasMounted, setHasMounted] = useState(false)
   const [projectContext, setProjectContext] = useState<{
     files: File[]
     analysis: ProjectAnalysis | null
@@ -161,6 +150,7 @@ export default function Home() {
   // Fragment state management
   const [fragment, setFragment] = useState<FragmentSchema | null>(null)
   const [result, setResult] = useState<ExecutionResult | undefined>()
+  const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
 
   // Navigation and action handlers
   const handleSocialClick = useCallback((platform: string) => {
@@ -340,6 +330,11 @@ export default function Home() {
     }
   }, [error, stop])
 
+  // Effect to track component mounting for client-side only logic
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   // Main form submission handler
   const handleSubmitAuth = useCallback(async (
     e: React.FormEvent<HTMLFormElement>, 
@@ -556,6 +551,7 @@ export default function Home() {
                   models={availableModels}
                   languageModel={languageModel}
                   onLanguageModelChange={handleLanguageModelChange}
+                  hasMounted={hasMounted}
                 />
                 <ChatSettings
                   apiKeyConfigurable={!process.env.NEXT_PUBLIC_NO_API_KEY_INPUT}
@@ -589,7 +585,7 @@ export default function Home() {
       {/* Command Palette Integration */}
       <CommandPalette 
         onCreateFragment={() => {
-          setChatInput("Create a new React component with modern best practices including TypeScript, responsive design, and accessibility features.")
+          setChatInput("Create a new Next.js React component with modern best practices including TypeScript, responsive design, and accessibility features.")
           setSelectedTemplate("nextjs-developer")
 
           setTimeout(() => {
@@ -601,9 +597,8 @@ export default function Home() {
         }}
         onClearChat={handleClearChat}
         onOpenSettings={() => {
-          router.push('/settings')
         }}
       />
     </div>
   )
-}
+}

components/chat-picker.tsx

@@ -20,13 +20,15 @@ export function ChatPicker({
   models,
   languageModel,
   onLanguageModelChange,
+  hasMounted, // Add hasMounted prop
 }: {
   templates: TemplatesDataObject
   selectedTemplate: 'auto' | TemplateId
   onSelectedTemplateChange: (template: 'auto' | TemplateId) => void
   models: LLMModel[]
   languageModel: LLMModelConfig
   onLanguageModelChange: (config: LLMModelConfig) => void
+  hasMounted: boolean // Define type for hasMounted
 }) {
   return (
     <div className="flex items-center space-x-2">
@@ -71,6 +73,7 @@ export function ChatPicker({
       </div>
       <div className="flex flex-col">
         <Select
+          key={hasMounted ? `lm-client-${languageModel.model}` : 'lm-server'} // Add key here
           name="languageModel"
           defaultValue={languageModel.model}
           onValueChange={(e) => onLanguageModelChange({ model: e })}

components/chat-sidebar/settings-dialog.tsx

@@ -1,8 +1,9 @@
 "use client"
 
+import { shallow } from "zustand/shallow"
+import { useChatSidebarStore } from "@/lib/stores/chat-sidebar-stores"
 import type React from "react"
 import { useState } from "react"
-import { useChatSidebarStore } from "@/lib/stores/chat-sidebar-stores"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
@@ -27,22 +28,35 @@ interface SettingsDialogProps {
 }
 
 export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
-  const { chatSessions, projects, clearAll, exportData, importData } = useChatSidebarStore()
-
   const [autoSave, setAutoSave] = useState(true)
   const [showTimestamps, setShowTimestamps] = useState(true)
   const [compactView, setCompactView] = useState(false)
 
-  const totalMessages = chatSessions.reduce((sum, session) => sum + session.messages.length, 0)
-  const storageSize = JSON.stringify({ chatSessions, projects }).length
+  const { chatSessions, projects, exportStoreData, importStoreData, clearStoreData } =
+    useChatSidebarStore(
+      (state) => ({
+        chatSessions: state.chatSessions,
+        projects: state.projects,
+        exportStoreData: state.exportData,
+        importStoreData: state.importData,
+        clearStoreData: state.clearAll,
+      })
+    )
+
+  // Defensive defaults in case chatSessions or projects are not yet populated
+  const safeChatSessions = chatSessions || []
+  const safeProjects = projects || []
+
+  const totalMessages = safeChatSessions.reduce((sum: number, session: any) => sum + (session.messages?.length || 0), 0)
+  const storageSize = JSON.stringify({ chatSessions: safeChatSessions, projects: safeProjects }).length
 
   const handleExport = () => {
-    const data = exportData()
+    const data = exportStoreData ? exportStoreData() : ""
     const blob = new Blob([data], { type: "application/json" })
     const url = URL.createObjectURL(blob)
     const a = document.createElement("a")
     a.href = url
-    a.download = `chat-history-${new Date().toISOString().split("T")[0]}.json`
+    a.download = `codinit-data-${new Date().toISOString().split("T")[0]}.json`
     document.body.appendChild(a)
     a.click()
     document.body.removeChild(a)
@@ -56,7 +70,9 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
     const reader = new FileReader()
     reader.onload = (e) => {
       const content = e.target?.result as string
-      importData(content)
+      if (importStoreData) {
+        importStoreData(content)
+      }
     }
     reader.readAsText(file)
     event.target.value = ""
@@ -76,11 +92,11 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <h4 className="text-sm font-medium">Statistics</h4>
             <div className="grid grid-cols-2 gap-4">
               <div className="text-center p-3 bg-muted rounded-lg">
-                <div className="text-2xl font-bold">{chatSessions.length}</div>
+                <div className="text-2xl font-bold">{safeChatSessions.length}</div>
                 <div className="text-xs text-muted-foreground">Chat Sessions</div>
               </div>
               <div className="text-center p-3 bg-muted rounded-lg">
-                <div className="text-2xl font-bold">{projects.length}</div>
+                <div className="text-2xl font-bold">{safeProjects.length}</div>
                 <div className="text-xs text-muted-foreground">Projects</div>
               </div>
               <div className="text-center p-3 bg-muted rounded-lg">
@@ -158,8 +174,10 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                     <AlertDialogCancel>Cancel</AlertDialogCancel>
                     <AlertDialogAction
                       onClick={() => {
-                        clearAll()
-                        onOpenChange(false)
+                        if (clearStoreData) {
+                          clearStoreData()
+                        }
+                        onOpenChange(false) // Close dialog after clearing
                       }}
                       className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                     >

components/enhanced-chat-input.tsx

@@ -305,9 +305,9 @@ export function EnhancedChatInput({
     }
 
     return (
-      <button className="px-2 py-1 rounded-sm bg-red-400/20 hover:bg-red-400/30 transition-colors" onClick={retry}>
+      <Button className="px-2 py-1 rounded-sm bg-red-400/20 hover:bg-red-400/30 transition-colors" onClick={retry}>
         Try Again
-      </button>
+      </Button>
     )
   }
 
@@ -377,53 +377,57 @@ export function EnhancedChatInput({
               onChange={handleFileInput}
             />
             <div className="flex items-center flex-1 gap-2">
-              <TooltipProvider>
-                <Tooltip delayDuration={0}>
-                  <TooltipTrigger asChild>
-                    <Button
-                      disabled={!isMultiModal || isErrored}
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="rounded-xl h-10 w-10"
-                      onClick={(e) => {
-                        e.preventDefault()
-                        document.getElementById("multimodal")?.click()
-                      }}
-                    >
-                      <Paperclip className="h-5 w-5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Add attachments</TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-
-
-              <GitHubImportModal
-                onImport={handleGitHubImport}
-                isLoading={isLoading}
-              />
+              <div className="relative">
+                  <div className="rounded-xl h-10 w-10" />
+                <TooltipProvider>
+                  <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        disabled={!isMultiModal || isErrored}
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="absolute inset-0 rounded-xl h-10 w-10 z-10"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          document.getElementById("multimodal")?.click()
+                        }}
+                      >
+                        <Paperclip className="h-5 w-5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Add attachments</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+
+              <div className="relative">
+                  <GitHubImportModal
+                    onImport={handleGitHubImport}
+                    isLoading={isLoading}
+                  />
+              </div>
 
               {files.length > 0 && filePreview}
             </div>
             <div>
-              <TooltipProvider>
-                <Tooltip delayDuration={0}>
-                  <TooltipTrigger asChild>
-                    <Button
-                      disabled={!input.trim() || isLoading || isEnhancing || isErrored}
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="rounded-xl h-10 w-10 mr-2" // Added mr-2 for spacing
-                      onClick={handleEnhanceMessage}
-                    >
-                      {isEnhancing ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Enhance message with AI</TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+                <TooltipProvider>
+                  <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        disabled={!input.trim() || isLoading || isEnhancing || isErrored}
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="rounded-xl h-10 w-10 mr-2" // Added mr-2 for spacing
+                        onClick={handleEnhanceMessage}
+                      >
+                        {isEnhancing ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Enhance message with AI</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               {!isLoading ? (
                 <TooltipProvider>
                   <Tooltip delayDuration={0}>

components/ui/star-border-demo.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+import { StarBorder } from "@/components/ui/star-border"
+
+export function StarBorderDemo() {
+  return (
+    <div className="space-y-8">
+      <StarBorder>
+        Theme-aware Border
+      </StarBorder>
+    </div>
+  )
+}