feat(ui): add repo select in chat sidebar

ee/tabby-ui/components/chat/prompt-form.tsx

@@ -26,6 +26,7 @@ import {
   SearchableSelectOption,
   SearchableSelectTextarea
 } from '@/components/searchable-select'
+import { RepoSelect } from './repo-select'
 
 export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
@@ -198,21 +199,21 @@ function PromptFormRenderer(
           return (
             <>
               <SearchableSelectAnchor>
-                <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md sm:border sm:px-12">
-                  <span
+                <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background pr-8 sm:rounded-md sm:border sm:pr-12">
+                  {/* <span
                     className={cn(
                       buttonVariants({ size: 'sm', variant: 'ghost' }),
                       'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 hover:bg-background sm:left-4'
                     )}
                   >
                     <IconEdit />
-                  </span>
+                  </span> */}
                   <SearchableSelectTextarea
                     tabIndex={0}
                     rows={1}
                     placeholder="Ask a question."
                     spellCheck={false}
-                    className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none"
+                    className="min-h-[60px] w-full resize-none bg-transparent pr-4 sm:pl-4 py-[1.3rem] focus-within:outline-none"
                     value={input}
                     ref={chatInputRef}
                     onChange={e => {
@@ -304,6 +305,11 @@ function PromptFormRenderer(
           )
         }}
       </SearchableSelect>
+      <RepoSelect
+        value={undefined}
+        onChange={() => {}}
+        models={['1', '2']}
+      />
     </form>
   )
 }

ee/tabby-ui/components/chat/repo-select.tsx

@@ -0,0 +1,97 @@
+import { Maybe } from '@/lib/gql/generates/graphql'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { IconCheck, IconFolderGit } from '@/components/ui/icons'
+import { Skeleton } from '@/components/ui/skeleton'
+import LoadingWrapper from '@/components/loading-wrapper'
+
+interface RepoSelectProps {
+  // todo rename
+  models: Maybe<Array<string>> | undefined
+  value: string | undefined
+  onChange: (v: string) => void
+  isInitializing?: boolean
+  // sourceId
+  workspaceRepoId?: string
+}
+
+export function RepoSelect({
+  models,
+  value,
+  onChange,
+  isInitializing
+}: RepoSelectProps) {
+  const onModelSelect = (v: string) => {
+    onChange(v)
+  }
+
+  return (
+    <LoadingWrapper
+      loading={isInitializing}
+      fallback={
+        <div className="w-full pl-2">
+          <Skeleton className="h-3 w-[20%]" />
+        </div>
+      }
+    >
+      {!!models?.length && (
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <Badge
+              variant="outline"
+              className="inline-flex h-7 flex-nowrap items-center gap-1 overflow-hidden rounded-md text-sm font-semibold"
+            >
+              <IconFolderGit />
+              {/* FIXME */}
+              {/* {value} */}
+              TabbyML/tabby
+            </Badge>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="bottom"
+            align="start"
+            className="dropdown-menu max-h-[30vh] min-w-[20rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow animate-in"
+          >
+            <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+              {models.map(model => {
+                const isSelected = model === value
+                return (
+                  <DropdownMenuRadioItem
+                    onClick={e => {
+                      onModelSelect(model)
+                      e.stopPropagation()
+                    }}
+                    value={model}
+                    key={model}
+                    className="cursor-pointer py-2 pl-3"
+                  >
+                    <IconCheck
+                      className={cn(
+                        'mr-2 shrink-0',
+                        model === value ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                    <span
+                      className={cn({
+                        'font-medium': isSelected
+                      })}
+                    >
+                      {model}
+                    </span>
+                  </DropdownMenuRadioItem>
+                )
+              })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </LoadingWrapper>
+  )
+}