Lee at zoo corp/ttc ux 1

e2e/playwright/projects.spec.ts

@@ -1328,7 +1328,7 @@ test(
 
     await test.step('should be shorted by modified initially', async () => {
       const lastModifiedButton = page.getByRole('button', {
-        name: 'Last Modified',
+        name: 'Age',
       })
       await expect(lastModifiedButton).toBeVisible()
       await expect(lastModifiedButton.getByLabel('arrow down')).toBeVisible()
@@ -1349,7 +1349,7 @@ test(
 
     await test.step('Reverse modified order', async () => {
       const lastModifiedButton = page.getByRole('button', {
-        name: 'Last Modified',
+        name: 'Age',
       })
       await lastModifiedButton.click()
       await expect(lastModifiedButton).toBeVisible()

package.json

@@ -55,6 +55,7 @@
     "json-rpc-2.0": "^1.6.0",
     "jszip": "^3.10.1",
     "minimist": "^1.2.8",
+    "ms": "^2.1.3",
     "openid-client": "^5.6.5",
     "re-resizable": "^6.11.2",
     "react": "^18.3.1",

src/App.css

@@ -36,3 +36,12 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes send-up {
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY(-10000px);
+  }
+}

src/App.tsx

@@ -13,7 +13,11 @@
 import { EngineStream } from '@src/components/EngineStream'
 import Gizmo from '@src/components/Gizmo'
 import { useLspContext } from '@src/components/LspProvider'
-import { ModelingSidebar } from '@src/components/ModelingSidebar/ModelingSidebar'
+import {
+  ModelingSidebarLeft,
+  ModelingSidebarRight,
+} from '@src/components/ModelingSidebar/ModelingSidebar'
+import { MlEphantConversation } from '@src/components/MlEphantConversation'
 import { UnitsMenu } from '@src/components/UnitsMenu'
 import { useAbsoluteFilePath } from '@src/hooks/useAbsoluteFilePath'
 import { useQueryParamEffects } from '@src/hooks/useQueryParamEffects'
@@ -269,7 +273,10 @@
           <Toolbar />
         </div>
         <ModalContainer />
-        <ModelingSidebar />
+        <div className="flex flex-row justify-between w-full h-full">
+          <ModelingSidebarLeft />
+          <ModelingSidebarRight />
+        </div>
         <EngineStream pool={pool} authToken={authToken} />
         {/* <CamToggle /> */}
         <section className="absolute bottom-2 right-2 flex flex-col items-end gap-3 pointer-events-none">

src/Auth.tsx

@@ -1,10 +1,24 @@
 import Loading from '@src/components/Loading'
-import { useAuthState } from '@src/lib/singletons'
+import {
+  useAuthState,
+  useToken,
+  mlEphantManagerActor,
+} from '@src/lib/singletons'
+import { MlEphantManagerTransitions } from '@src/machines/mlEphantManagerMachine'
 
 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {
   const authState = useAuthState()
   const isLoggingIn = authState.matches('checkIfLoggedIn')
+  const token = useToken()
+
+  if (!isLoggingIn) {
+    // The earliest we can give machines their Zoo API token.
+    mlEphantManagerActor.send({
+      type: MlEphantManagerTransitions.SetApiToken,
+      token,
+    })
+  }
 
   return isLoggingIn ? (
     <Loading className="h-screen w-screen">

src/components/HomeSearchBar.tsx

@@ -0,0 +1,95 @@
+import Fuse from 'fuse.js'
+import { useEffect, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+import { CustomIcon } from '@src/components/CustomIcon'
+
+import type { Project } from '@src/lib/project'
+import type { Prompt } from '@src/lib/prompt'
+
+export type HomeItem = Project | Prompt
+export type HomeItems = Project[] | Prompt[]
+
+export const areHomeItemsProjects = (items: HomeItems): items is Project[] => {
+  if (items.length === 0) return true
+  const item = items[0]
+  return item !== undefined && 'path' in item
+}
+
+export const areHomeItemsPrompts = (items: HomeItems): items is Prompt[] => {
+  if (items.length === 0) return true
+  const item = items[0]
+  return item !== undefined && 'prompt' in item
+}
+
+export function useHomeSearch(initialSearchResults: HomeItems) {
+  const [query, setQuery] = useState('')
+  const [searchResults, setSearchResults] =
+    useState<HomeItems>(initialSearchResults)
+
+  useEffect(() => {
+    setSearchResults(initialSearchResults)
+  }, [initialSearchResults])
+
+  const searchAgainst = (items: HomeItems) => (queryRequested: string) => {
+    const nameKeyToMatchAgainst = areHomeItemsProjects(items)
+      ? 'name'
+      : 'prompt'
+
+    // Fuse is not happy with HomeItems
+    // @ts-expect-error
+    const fuse = new Fuse(items, {
+      keys: [{ name: nameKeyToMatchAgainst, weight: 0.7 }],
+      includeScore: true,
+    })
+
+    const results = fuse.search(queryRequested).map((result) => result.item)
+
+    // On an empty query, we consider that matching all items.
+    setSearchResults(queryRequested.length > 0 ? results : items)
+    setQuery(queryRequested)
+  }
+
+  return {
+    searchAgainst,
+    searchResults,
+    query,
+  }
+}
+
+export function HomeSearchBar({
+  onChange,
+}: {
+  onChange: (query: string) => void
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useHotkeys(
+    'Ctrl+.',
+    (event) => {
+      event.preventDefault()
+      inputRef.current?.focus()
+    },
+    { enableOnFormTags: true }
+  )
+
+  return (
+    <div className="relative group">
+      <div className="flex items-center gap-2 py-0.5 pl-0.5 pr-2 rounded border-solid border border-primary/10 dark:border-chalkboard-80 focus-within:border-primary dark:focus-within:border-chalkboard-30">
+        <CustomIcon
+          name="search"
+          className="w-5 h-5 rounded-sm bg-primary/10 dark:bg-transparent text-primary dark:text-chalkboard-10 group-focus-within:bg-primary group-focus-within:text-chalkboard-10"
+        />
+        <input
+          ref={inputRef}
+          onChange={(event) => onChange(event.target.value)}
+          className="w-full text-sm bg-transparent focus:outline-none selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-none"
+          placeholder="Search (Ctrl+.)"
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck="false"
+        />
+      </div>
+    </div>
+  )
+}

src/components/Loading.tsx

@@ -20,6 +20,7 @@ import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 
 interface LoadingProps extends React.PropsWithChildren {
   isDummy?: boolean
+  isCompact?: boolean
   className?: string
   dataTestId?: string
   retryAttemptCountdown?: number
@@ -80,6 +81,7 @@ export const CONNECTION_ERROR_CALL_TO_ACTION_TEXT: Record<
 
 const Loading = ({
   isDummy,
+  isCompact,
   children,
   className,
   dataTestId,
@@ -200,11 +202,11 @@ const Loading = ({
   if (isDummy) {
     return (
       <div
-        className={`body-bg flex flex-col items-center justify-center ${colorClass} ${className}`}
+        className={`flex ${isCompact ? 'flex-row gap-2' : 'flex-col'} items-center justify-center ${colorClass} ${className}`}
         data-testid={dataTestId ? dataTestId : 'loading'}
       >
-        <Spinner />
-        <p className={`text-base mt-4`}>{children}</p>
+        <Spinner className={isCompact ? 'w-4 h-4' : 'w-8 w-8'} />
+        <p className={`text-base ${isCompact ? '' : 'mt-4'}`}>{children}</p>
       </div>
     )
   }

src/components/MlEphantConversation.tsx

@@ -0,0 +1,142 @@
+import type { ReactNode } from 'react'
+import { useRef, useEffect, useState } from 'react'
+import type { Prompt } from '@src/lib/prompt'
+import type { FileMeta } from '@src/lib/types'
+import { PromptCard } from '@src/components/PromptCard'
+import { CustomIcon } from '@src/components/CustomIcon'
+
+export interface MlEphantConversationProps {
+  prompts: Prompt[]
+  onProcess: (requestedPrompt: string) => void
+  disabled?: boolean
+}
+
+interface MlEphantConversationInputProps {
+  onProcess: MlEphantConversationProps['onProcess']
+  disabled?: boolean
+}
+
+export const MlEphantConversationInput = (
+  props: MlEphantConversationInputProps
+) => {
+  const refDiv = useRef<HTMLDivElement>(null)
+  const [heightConvo, setHeightConvo] = useState(0)
+  const [lettersForAnimation, setLettersForAnimation] = useState<ReactNode[]>(
+    []
+  )
+  const [isAnimating, setAnimating] = useState(false)
+
+  const onClick = () => {
+    const value = refDiv.current?.innerText
+    if (!value) return
+    setHeightConvo(refDiv.current.getBoundingClientRect().height)
+
+    props.onProcess(value)
+    setLettersForAnimation(
+      value.split('').map((c, index) => (
+        <span
+          key={index}
+          style={{
+            display: 'inline-block',
+            animation: `${Math.random() * 2}s linear 0s 1 normal forwards running send-up`,
+          }}
+        >
+          {c}
+        </span>
+      ))
+    )
+    setAnimating(true)
+    refDiv.current.innerText = ''
+
+    setTimeout(() => {
+      setAnimating(false)
+    }, 2000)
+  }
+
+  useEffect(() => {
+    if (!isAnimating) {
+      refDiv.current.focus()
+    }
+  }, [isAnimating])
+
+  return (
+    <div className="flex flex-col p-4 gap-2">
+      <div className="text-sm text-chalkboard-60">Enter a prompt</div>
+      <div className="p-2 border flex flex-col gap-2">
+        <div
+          contentEditable={true}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck="false"
+          ref={refDiv}
+          className={`outline-none w-full overflow-auto ${isAnimating ? 'hidden' : ''}`}
+          style={{ height: '2lh' }}
+          placeholder="Help get me started on..."
+        ></div>
+        <div
+          className={`${isAnimating ? '' : 'hidden'} overflow-hidden w-full p-2`}
+          style={{ height: heightConvo }}
+        >
+          {lettersForAnimation}
+        </div>
+        <div className="flex justify-end">
+          <button
+            disabled={props.disabled}
+            onClick={onClick}
+            className="w-10 m-0 bg-ml-green p-2 flex justify-center"
+          >
+            <CustomIcon name="arrowUp" className="w-5 h-5 animate-bounce" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const MlEphantConversation = (props: MlEphantConversationProps) => {
+  const refScroll = useRef<HTMLDivElement>(null)
+
+  const onDelete = () => {}
+  const onFeedback = () => {}
+
+  useEffect(() => {
+    if (refScroll.current) {
+      refScroll.current.children[
+        refScroll.current.children.length - 1
+      ].scrollIntoView()
+    }
+  }, [props.prompts.length])
+
+  const promptCards = props.prompts.map((prompt) => (
+    <PromptCard
+      key={prompt.id}
+      {...prompt}
+      disabled={prompt.status !== 'completed'}
+      onDelete={onDelete}
+      onFeedback={onFeedback}
+    />
+  ))
+  return (
+    <div className="relative">
+      <div className="absolute inset-0">
+        <div className="flex flex-col h-full">
+          <div className="h-full flex flex-col justify-end overflow-auto">
+            <div className="overflow-auto" ref={refScroll}>
+              <div className="text-center p-4 text-chalkboard-60 text-md">
+                The beginning of this project's Text-to-CAD history.
+              </div>
+              {promptCards}
+            </div>
+          </div>
+          <div className="border-t">
+            <MlEphantConversationInput
+              disabled={props.disabled}
+              onProcess={props.onProcess}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}