e2:"ExplicitChatIdProvider" e3:I[903690,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"$e2"] e4:I[838238,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"SWRDataProvider"] e5:T5bc2,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: #fcfcfc; --foreground: #000000; --card: #ffffff; --card-foreground: #000000; --popover: #fcfcfc; --popover-foreground: #000000; --primary: #000000; --primary-foreground: #ffffff; --secondary: #ebebeb; --secondary-foreground: #000000; --muted: #f5f5f5; --muted-foreground: #525252; --accent: #ebebeb; --accent-foreground: #000000; --destructive: #e54b4f; --destructive-foreground: #ffffff; --border: #e4e4e4; --input: #ebebeb; --ring: #000000; --chart-1: #ffae04; --chart-2: #2d62ef; --chart-3: #a4a4a4; --chart-4: #e4e4e4; --chart-5: #747474; --sidebar: #fcfcfc; --sidebar-foreground: #000000; --sidebar-primary: #000000; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #ebebeb; --sidebar-accent-foreground: #000000; --sidebar-border: #ebebeb; --sidebar-ring: #000000; --font-sans: Inter, ui-sans-serif, sans-serif, system-ui; --font-serif: Alegreya, ui-serif, serif; --font-mono: IBM Plex Mono, ui-monospace, monospace; --radius: 0.5rem; --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); --tracking-normal: 0em; --spacing: 0.25rem; } .dark { --background: #000000; --foreground: #ffffff; --card: #090909; --card-foreground: #ffffff; --popover: #121212; --popover-foreground: #ffffff; --primary: #ffffff; --primary-foreground: #000000; --secondary: #165dfb; --secondary-foreground: #ffffff; --muted: #1d1d1d; --muted-foreground: #a4a4a4; --accent: #333333; --accent-foreground: #ffffff; --destructive: #ff5b5b; --destructive-foreground: #000000; --border: #242424; --input: #333333; --ring: #a4a4a4; --chart-1: #ffae04; --chart-2: #2671f4; --chart-3: #747474; --chart-4: #525252; --chart-5: #e4e4e4; --sidebar: #121212; --sidebar-foreground: #ffffff; --sidebar-primary: #ffffff; --sidebar-primary-foreground: #000000; --sidebar-accent: #333333; --sidebar-accent-foreground: #ffffff; --sidebar-border: #333333; --sidebar-ring: #a4a4a4; --font-sans: Inter, ui-sans-serif, sans-serif, system-ui; --font-serif: Alegreya, ui-serif, serif; --font-mono: IBM Plex Mono, ui-monospace, monospace; --radius: 0.5rem; --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } } /* Custom animations for chat transitions */ @keyframes slideDown { from { transform: translateY(0); } to { transform: translateY(calc(100vh - 120px)); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .slide-down { animation: slideDown 0.6s ease-in-out forwards; } .fade-in { animation: fadeIn 0.4s ease-out forwards; } [V0_FILE]typescriptreact:file="hooks/use-textarea-resize.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useLayoutEffect, useRef } from "react" import type { ComponentProps } from "react" export function useTextareaResize(value: ComponentProps<"textarea">["value"], rows = 1) { const textareaRef = useRef(null) useLayoutEffect(() => { const textArea = textareaRef.current if (textArea) { // Get the line height to calculate minimum height based on rows const computedStyle = window.getComputedStyle(textArea) const lineHeight = Number.parseInt(computedStyle.lineHeight, 10) || 20 const padding = Number.parseInt(computedStyle.paddingTop, 10) + Number.parseInt(computedStyle.paddingBottom, 10) // Calculate minimum height based on rows const minHeight = lineHeight * rows + padding // Reset height to auto first to get the correct scrollHeight textArea.style.height = "0px" const scrollHeight = Math.max(textArea.scrollHeight, minHeight) // Set the final height textArea.style.height = `${scrollHeight + 2}px` } }, [value, rows]) return textareaRef } [V0_FILE]typescriptreact:file="components/suggestion-pills.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" interface SuggestionPillsProps { suggestions: string[] onSuggestionClick: (suggestion: string) => void className?: string } export function SuggestionPills({ suggestions, onSuggestionClick, className }: SuggestionPillsProps) { return (

{suggestions.map((suggestion, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/chat-message.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { Sparkles } from "lucide-react" interface ChatMessageProps { message: string isUser: boolean timestamp?: string className?: string } export function ChatMessage({ message, isUser, timestamp, className }: ChatMessageProps) { return (

{!isUser && (

)}

{isUser ? (

{message}

) : (

{message}

{timestamp &&

{timestamp}

}

)}

) } [V0_FILE]typescriptreact:file="components/ui/chat-input.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" import { useTextareaResize } from "@/hooks/use-textarea-resize" import { ArrowUpIcon } from "lucide-react" import type React from "react" import { createContext, useContext } from "react" interface ChatInputContextValue { value?: string onChange?: React.ChangeEventHandler onSubmit?: () => void loading?: boolean onStop?: () => void variant?: "default" | "unstyled" rows?: number } const ChatInputContext = createContext({}) interface ChatInputProps extends Omit { children: React.ReactNode className?: string variant?: "default" | "unstyled" rows?: number } function ChatInput({ children, className, variant = "default", value, onChange, onSubmit, loading, onStop, rows = 1, }: ChatInputProps) { const contextValue: ChatInputContextValue = { value, onChange, onSubmit, loading, onStop, variant, rows, } return (

{children}

) } ChatInput.displayName = "ChatInput" interface ChatInputTextAreaProps extends React.ComponentProps { value?: string onChange?: React.ChangeEventHandler onSubmit?: () => void variant?: "default" | "unstyled" } function ChatInputTextArea({ onSubmit: onSubmitProp, value: valueProp, onChange: onChangeProp, className, variant: variantProp, ...props }: ChatInputTextAreaProps) { const context = useContext(ChatInputContext) const value = valueProp ?? context.value ?? "" const onChange = onChangeProp ?? context.onChange const onSubmit = onSubmitProp ?? context.onSubmit const rows = context.rows ?? 1 // Convert parent variant to textarea variant unless explicitly overridden const variant = variantProp ?? (context.variant === "default" ? "unstyled" : "default") const textareaRef = useTextareaResize(value, rows) const handleKeyDown = (e: React.KeyboardEvent) => { if (!onSubmit) { return } if (e.key === "Enter" && !e.shiftKey) { if (typeof value !== "string" || value.trim().length === 0) { return } e.preventDefault() onSubmit() } } return (

)
}

ChatInputTextArea.displayName = "ChatInputTextArea"

interface ChatInputSubmitProps extends React.ComponentProps<typeof Button> {
  onSubmit?: () => void
  loading?: boolean
  onStop?: () => void
}

function ChatInputSubmit({
  onSubmit: onSubmitProp,
  loading: loadingProp,
  onStop: onStopProp,
  className,
  ...props
}: ChatInputSubmitProps) {
  const context = useContext(ChatInputContext)
  const loading = loadingProp ?? context.loading
  const onStop = onStopProp ?? context.onStop
  const onSubmit = onSubmitProp ?? context.onSubmit

if (loading && onStop) {
    return (
      <Button
        onClick={onStop}
        className={cn("shrink-0 rounded-full p-1.5 h-fit border dark:border-zinc-600", className)}
        {...props}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-label="Stop"
        >
          <title>Stop</title>
          <rect x="6" y="6" width="12" height="12" />
        </svg>
      </Button>
    )
  }

const isDisabled = typeof context.value !== "string" || context.value.trim().length === 0

return (
    <Button
      className={cn("shrink-0 rounded-full p-1.5 h-fit border dark:border-zinc-600", className)}
      disabled={isDisabled}
      onClick={(event) => {
        event.preventDefault()
        if (!isDisabled) {
          onSubmit?.()
        }
      }}
      {...props}
    >
      <ArrowUpIcon />
    </Button>
  )
}

ChatInputSubmit.displayName = "ChatInputSubmit"

export { ChatInput, ChatInputTextArea, ChatInputSubmit }
[V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon.ico-MS2bL835lWOQs3QDpkieFOHUYC6293.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter, Alegreya } from "next/font/google"
import "./globals.css"

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
})

const alegreya = Alegreya({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-alegreya",
})

export const metadata: Metadata = {
  title: "Ultra - AI Goal Planning for Students",
  description: "Plan your academic and career goals with AI-powered guidance",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${inter.variable} ${alegreya.variable} dark`}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { ChatInput, ChatInputTextArea, ChatInputSubmit } from "@/components/ui/chat-input"
import { ChatMessage } from "@/components/chat-message"
import { SuggestionPills } from "@/components/suggestion-pills"
import { Sparkles } from "lucide-react"
import Image from "next/image"

interface Message {
  id: string
  text: string
  isUser: boolean
  timestamp: string
}

const initialSuggestions = [
  "I want to be a Software Engineer building next-gen apps",
  "Help me plan for medical school",
  "I'm interested in finance and investing",
  "Show me career paths in AI and machine learning",
]

const followUpSuggestions = [
  "What skills should I focus on?",
  "Tell me about college requirements",
  "How can I gain relevant experience?",
  "What are the salary expectations?",
]

export default function Home() {
  const [messages, setMessages] = useState<Message[]>([])
  const [inputValue, setInputValue] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [hasStartedChat, setHasStartedChat] = useState(false)
  const [showCompactMode, setShowCompactMode] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (messages.length > 0 && messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start",
      })
    }
  }, [messages])

const handleSubmit = async () => {
    if (!inputValue.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      text: inputValue,
      isUser: true,
      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
    }

setMessages((prev) => [...prev, userMessage])
    setInputValue("")
    setIsLoading(true)

if (!hasStartedChat) {
      setHasStartedChat(true)
      setTimeout(() => {
        setShowCompactMode(true)
      }, 500)
    }

setTimeout(() => {
      const aiResponse: Message = {
        id: (Date.now() + 1).toString(),
        text: getAIResponse(inputValue),
        isUser: false,
        timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
      }
      setMessages((prev) => [...prev, aiResponse])
      setIsLoading(false)
    }, 1500)
  }

const getAIResponse = (userInput: string): string => {
    if (userInput.toLowerCase().includes("software engineer")) {
      return "Love that goal! 🚀 Software Engineers are truly shaping the future. What kind of apps would you love to build someday? Anything specific that excites you right now?"
    }
    if (userInput.toLowerCase().includes("medical")) {
      return "That's an amazing aspiration! 🏥 Medicine is such a rewarding field. Are you thinking about a specific specialty, or are you still exploring different areas of medicine?"
    }
    if (userInput.toLowerCase().includes("finance")) {
      return "Excellent choice! 💰 Finance offers so many exciting opportunities. Are you interested in areas like personal finance, investing, or maybe helping people build better financial habits?"
    }
    return "That's a fantastic goal! I'm here to help you create a personalized plan to achieve it. Tell me more about what specifically interests you about this path?"
  }

const handleSuggestionClick = (suggestion: string) => {
    setInputValue(suggestion)
  }

const currentSuggestions = messages.length > 0 ? followUpSuggestions : initialSuggestions

return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
        <div className="flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-2">
            <Image src="/favicon.ico" alt="Ultra logo" width={24} height={24} className="w-6 h-6" />
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ultra%20White%20Logo-AQ6p5ofuVJqbE1HkyGEU1YtyUhZYDK.png"
              alt="Ultra"
              width={60}
              height={20}
              className="h-5"
            />
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="pt-20">
        {!hasStartedChat ? (
          /* Initial Full Screen Chat */
          <div className="flex flex-col items-center justify-center min-h-[calc(100vh-5rem)] px-6">
            <div className="w-full max-w-2xl">
              <div className="text-center mb-12">
                <h1 className="text-4xl font-bold mb-4">Plan Your Future</h1>
                <p className="text-xl text-muted-foreground">
                  Let's create a personalized roadmap for your academic and career goals
                </p>
              </div>

<ChatInput
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  onSubmit={handleSubmit}
                  loading={isLoading}
                  className="max-w-2xl mx-auto"
                >
                  <ChatInputTextArea placeholder="Tell me about your goals and aspirations..." className="text-base" />
                  <ChatInputSubmit />
                </ChatInput>
              </div>
            </div>
          </div>
        ) : (
          /* Compact Mode Layout */
          <div className="flex">
            {/* Main Content Area */}
            <div className="flex-1 max-w-4xl mx-auto">
              {/* Chat Messages */}
              <div className="px-6 py-8 pb-40">
                {messages.map((message) => (
                  <ChatMessage
                    key={message.id}
                    message={message.text}
                    isUser={message.isUser}
                    timestamp={message.timestamp}
                  />
                ))}
                {isLoading && (
                  <div className="flex gap-3 mb-6">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center">
                      <Sparkles className="w-4 h-4" />
                    </div>
                    <div className="flex-1">
                      <div className="flex gap-1">
                        <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></div>
                        <div
                          className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                          style={{ animationDelay: "0.1s" }}
                        ></div>
                        <div
                          className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                          style={{ animationDelay: "0.2s" }}
                        ></div>
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>
            </div>
          </div>
        )}

{/* Bottom Chat Input (Compact Mode) */}
        {showCompactMode && (
          <div className={`fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-2xl px-6 fade-in`}>
            <div className="space-y-6 mt-8">
              <SuggestionPills suggestions={currentSuggestions} onSuggestionClick={handleSuggestionClick} />

<ChatInput
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                onSubmit={handleSubmit}
                loading={isLoading}
                className="bg-card shadow-lg border-border"
              >
                <ChatInputTextArea placeholder="Message Ultra..." className="bg-transparent" />
                <ChatInputSubmit />
              </ChatInput>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}dc:["$","$Le3",null,{"chatId":"KyazH5Ktlu5","children":["$","$Le4",null,{"data":{"@\"active-block\",\"KyazH5Ktlu5\",":{"id":"b_mDOtY4TzjpE","messageId":"jpSHISCKiOx0uFE3ZKBqwIjx1lnBc5wi","source":"$e5","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ai-chat-app","type":"code-project","project":"ai-chat-app","taskNameActive":"Reducing logo height","taskNameComplete":"Reduced logo height"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"KyazH5Ktlu5\",":false},"children":"$Le6"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This