'use client' import { useMemo, useRef, useState } from 'react' import { Editor } from '@tiptap/react' import { Maybe } from 'graphql/jsutils/Maybe' import { NEWLINE_CHARACTER } from '@/lib/constants' import { ContextInfo } from '@/lib/gql/generates/graphql' import { useCurrentTheme } from '@/lib/hooks/use-current-theme' import { ThreadRunContexts } from '@/lib/types' import { checkSourcesAvailability, cn, getMentionsFromText, getThreadRunContextsFromMentions, isCodeSourceContext } from '@/lib/utils' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import LoadingWrapper from '../loading-wrapper' import { PromptEditor, PromptEditorRef } from '../prompt-editor' import { Button } from '../ui/button' import { IconArrowRight, IconAtSign, IconSpinner } from '../ui/icons' import { Separator } from '../ui/separator' import { Skeleton } from '../ui/skeleton' import { ModelSelect } from './model-select' import { RepoSelect } from './repo-select' export default function TextAreaSearch({ onSearch, modelName, onSelectModel, repoSourceId, onSelectRepo, className, placeholder, showBetaBadge, isLoading, autoFocus, loadingWithSpinning, cleanAfterSearch = true, isFollowup, contextInfo, fetchingContextInfo, isInitializingResources, models }: { onSearch: (value: string, ctx: ThreadRunContexts) => void onSelectModel: (v: string) => void isInitializingResources: boolean // selected model modelName: string | undefined // selected repo repoSourceId: string | undefined onSelectRepo: (id: string | undefined) => void className?: string placeholder?: string showBetaBadge?: boolean isLoading?: boolean autoFocus?: boolean loadingWithSpinning?: boolean cleanAfterSearch?: boolean isFollowup?: boolean contextInfo?: ContextInfo fetchingContextInfo: boolean onValueChange?: (value: string | undefined) => void models: Maybe> | undefined }) { const [isFocus, setIsFocus] = useState(false) const [value, setValue] = useState('') const editorRef = useRef(null) const focusTextarea = () => { editorRef.current?.editor?.commands.focus() } const onWrapperClick = () => { focusTextarea() } const handleSelectModel = (v: string) => { onSelectModel(v) setTimeout(() => { focusTextarea() }) } const handleSelectRepo = (id: string | undefined) => { onSelectRepo(id) setTimeout(() => { focusTextarea() }) } const handleSubmit = (editor: Editor | undefined | null) => { if (!editor || isLoading || isInitializingResources) { return } const text = editor .getText({ blockSeparator: NEWLINE_CHARACTER }) .trim() if (!text) return const mentions = getMentionsFromText(text, contextInfo?.sources) const ctx: ThreadRunContexts = { ...getThreadRunContextsFromMentions(mentions), modelName } // do submit onSearch(text, ctx) // clear content if (cleanAfterSearch) { editorRef.current?.editor?.chain().clearContent().focus().run() setValue('') } } const onInsertMention = (prefix: string) => { const editor = editorRef.current?.editor if (!editor) return editor .chain() .focus() .command(({ tr, state }) => { const { $from } = state.selection const isAtLineStart = $from.parentOffset === 0 const isPrecededBySpace = $from.nodeBefore?.text?.endsWith(' ') ?? false if (isAtLineStart || isPrecededBySpace) { tr.insertText(prefix) } else { tr.insertText(' ' + prefix) } return true }) .run() } const { hasDocumentSource } = useMemo(() => { return checkSourcesAvailability(contextInfo?.sources) }, [contextInfo?.sources]) const repos = useMemo(() => { return contextInfo?.sources.filter(x => isCodeSourceContext(x.sourceKind)) }, [contextInfo?.sources]) const showModelSelect = !!models?.length const showRepoSelect = !!repos?.length && (!isFollowup || (isFollowup && !!repoSourceId)) const showBottomBar = showModelSelect || showRepoSelect return (

{showBetaBadge && }

setIsFocus(true)} onBlur={() => setIsFocus(false)} onUpdate={({ editor }) => setValue( editor .getText({ blockSeparator: NEWLINE_CHARACTER }) .trim() ) } ref={editorRef} placement={isFollowup ? 'bottom' : 'top'} className={cn( 'text-area-autosize resize-none rounded-lg !border-none bg-transparent !shadow-none !outline-none !ring-0 !ring-offset-0', { 'py-3': !showBetaBadge, 'py-4': showBetaBadge } )} editorClassName={ isFollowup && showBottomBar ? 'min-h-[1.75rem]' : 'min-h-[3.5em]' } /> {isFollowup && showBottomBar && (

e.stopPropagation()} > {showRepoSelect && ( )} {showRepoSelect && showModelSelect && ( )} {showModelSelect && ( )}

)}

0, '!bg-muted !text-primary !cursor-default': isLoading || value.length === 0 || isInitializingResources, 'mr-1.5': !showBetaBadge } )} onClick={() => handleSubmit(editorRef.current?.editor)} > {loadingWithSpinning && isLoading && ( )} {(!loadingWithSpinning || !isLoading) && ( )}

{/* bottom toolbar for HomePage */} {!isFollowup && (

e.stopPropagation()} >

} > {/* mention docs */} Select a document to bring into context {/* select codebase */} {/* model select */} {!!models?.length && ( <> )}

)} ) } function BetaBadge() { const { theme } = useCurrentTheme() return ( Beta

Please note that the answer engine is still in its early stages, and certain functionalities, such as finding the correct code context and the quality of summarizations, still have room for improvement. If you encounter an issue and believe it can be enhanced, consider sharing it in our Slack community!

) }