// Inspired by Chatbot-UI and modified to fit the needs of this project // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx import React, { useMemo } from 'react' import Image from 'next/image' import tabbyLogo from '@/assets/tabby.png' import { compact, isEmpty, isEqual, isNil, uniqWith } from 'lodash-es' import { MARKDOWN_CITATION_REGEX } from '@/lib/constants/regex' import { useEnableSearchPages } from '@/lib/experiment-flags' import { ContextSource, ContextSourceKind } from '@/lib/gql/generates/graphql' import { useMe } from '@/lib/hooks/use-me' import { filename2prism } from '@/lib/language-utils' import { AssistantMessage, AttachmentCodeItem, Context, FileContext, QuestionAnswerPair, RelevantCodeContext, UserMessage } from '@/lib/types/chat' import { attachmentCodeToTerminalContext, buildCodeBrowserUrlForContext, buildMarkdownCodeBlock, cn, getFileLocationFromContext, getMentionsFromText, getRangeFromAttachmentCode, getRangeTextFromAttachmentCode, isAttachmentCommitDoc, isAttachmentIngestedDoc, isAttachmentIssueDoc, isAttachmentPageDoc, isAttachmentPullDoc, isAttachmentWebDoc, isDocSourceContext } from '@/lib/utils' import { convertContextBlockToPlaceholder } from '@/lib/utils/markdown' import { CodeRangeLabel } from '../code-range-label' import { CopyButton } from '../copy-button' import { ErrorMessageBlock, MessageMarkdown } from '../message-markdown' import { Button } from '../ui/button' import { IconEdit, IconFile, IconRefresh, IconTerminalSquare, IconTrash, IconUser } from '../ui/icons' import { Separator } from '../ui/separator' import { Skeleton } from '../ui/skeleton' import { MyAvatar } from '../user-avatar' import { ChatContext } from './chat-context' import { CodeReferences } from './code-references' import { ReadingDocStepper } from './reading-doc-stepper' import { ReadingRepoStepper } from './reading-repo-stepper' interface QuestionAnswerListProps { messages: QuestionAnswerPair[] } function QuestionAnswerList({ messages }: QuestionAnswerListProps) { const { isLoading } = React.useContext(ChatContext) return (

{messages?.map((message, index) => { const isLastItem = index === messages.length - 1 return ( // use userMessageId as QuestionAnswerItem ID {!isLastItem && } ) })}

) } interface QuestionAnswerItemProps { message: QuestionAnswerPair isLoading: boolean isLastItem?: boolean } type SelectCode = { filepath: string isMultiLine: boolean } function QuestionAnswerItem({ message, isLoading, isLastItem }: QuestionAnswerItemProps) { const { user, assistant } = message return ( <> {!!assistant && ( <> )} ) } function UserMessageCard(props: { message: UserMessage }) { const { message } = props const [{ data }] = useMe() const selectContext = message.selectContext const { openInEditor, supportsOnApplyInEditorV2, contextInfo, fetchingContextInfo } = React.useContext(ChatContext) const selectCodeSnippet = React.useMemo(() => { if (selectContext?.kind === 'terminal') { return buildMarkdownCodeBlock(selectContext?.selection, 'shell') } if (!selectContext?.content) return '' const language = selectContext?.filepath ? filename2prism(selectContext?.filepath)[0] ?? '' : '' return buildMarkdownCodeBlock(selectContext?.content, language) }, [selectContext]) let selectCode: SelectCode | null = null if ( selectCodeSnippet && message.selectContext && message.selectContext.kind === 'file' ) { const { range, filepath } = message.selectContext selectCode = { filepath, isMultiLine: !!range && !isNil(range?.start) && !isNil(range?.end) && range.start < range.end } } const processedContent = useMemo(() => { return convertContextBlockToPlaceholder(message.content) }, [message.content]) return (

} />

{data?.me.name}

{selectCode && message.selectContext && message.selectContext.kind === 'file' && (

{ const context = message.selectContext! if (context.kind === 'file') { openInEditor(getFileLocationFromContext(context)) } }} >

{selectCode.filepath}

)} {message.selectContext?.kind === 'terminal' && (

{message.selectContext.name}

)}

) } function UserMessageCardActions(props: { message: UserMessage }) { const { message } = props const { handleMessageAction, isLoading } = React.useContext(ChatContext) return ( {!isLoading && ( )} {!isLoading && ( )} ) } interface AssistantMessageCardProps { userMessageId: string isLoading: boolean message: AssistantMessage userMessage: UserMessage enableRegenerating?: boolean } interface AssistantMessageActionProps { userMessageId: string message: AssistantMessage enableRegenerating?: boolean attachmentCode?: Array } function AssistantMessageCard(props: AssistantMessageCardProps) { const { message, userMessage, isLoading, userMessageId, enableRegenerating, ...rest } = props const { onApplyInEditor, onCopyContent, onLookupSymbol, openInEditor, openExternal, supportsOnApplyInEditorV2, runShell, contextInfo } = React.useContext(ChatContext) const [enableSearchPages] = useEnableSearchPages() const clientCode: Array = React.useMemo(() => { return uniqWith( compact([ userMessage.activeContext, ...(userMessage?.relevantContext ?? []) ]).map(item => { if (item.kind === 'terminal') { return item } const terminalContext = attachmentCodeToTerminalContext(item) if (terminalContext) { return terminalContext } return { kind: 'file', range: getRangeFromAttachmentCode(item), filepath: item.filepath, content: item.content, gitUrl: item.gitUrl, commit: item.commit ?? undefined } }), isEqual ) }, [userMessage.activeContext, userMessage.relevantContext]) const serverCode: Array = React.useMemo(() => { return ( message?.attachment?.code?.map(code => { const terminalContext = attachmentCodeToTerminalContext(code) if (terminalContext) { return terminalContext } return { kind: 'file', range: getRangeFromAttachmentCode(code), filepath: code.filepath, content: code.content, gitUrl: code.gitUrl, commit: code.commit ?? undefined } }) ?? [] ) }, [message?.attachment?.code]) const attachmentClientCode: Array< Omit & { startLine?: number | undefined gitUrl?: string | undefined } > = useMemo(() => { const formattedAttachmentClientCode = clientCode?.map(o => { if (o.kind === 'terminal') { return { content: o.selection, filepath: '', gitUrl: '', baseDir: '', startLine: undefined, language: 'shell', isClient: true } } return { content: o.content, filepath: o.filepath, gitUrl: o.gitUrl, baseDir: o.baseDir, startLine: o.range ? o.range.start : undefined, language: filename2prism(o.filepath ?? '')[0], isClient: true } }) ?? [] return formattedAttachmentClientCode }, [clientCode]) const attachmentServerCode: Array> = useMemo(() => { const formattedServerAttachmentCode = serverCode?.map(o => { if (o.kind === 'terminal') { return { content: o.selection, filepath: '', gitUrl: '', baseDir: '', startLine: undefined, language: 'shell', isClient: false } } return { content: o.content, filepath: o.filepath, gitUrl: o.gitUrl ?? '', startLine: o.range?.start, language: filename2prism(o.filepath ?? '')[0], isClient: false } }) ?? [] return compact([...formattedServerAttachmentCode]) }, [serverCode]) const messageAttachmentDocs = message?.attachment?.doc // pulls / issues / commits const codebaseDocs = useMemo(() => { return messageAttachmentDocs?.filter( x => isAttachmentPullDoc(x) || isAttachmentIssueDoc(x) || isAttachmentCommitDoc(x) ) }, [messageAttachmentDocs]) // web docs const webDocs = useMemo(() => { return messageAttachmentDocs?.filter( x => isAttachmentWebDoc(x) || isAttachmentIngestedDoc(x) ) }, [messageAttachmentDocs]) // pages const pages = useMemo(() => { return messageAttachmentDocs?.filter(x => isAttachmentPageDoc(x)) }, [messageAttachmentDocs]) const docQuerySources: Array> = useMemo(() => { if (!contextInfo?.sources || !userMessage?.content) return [] const _sources = getMentionsFromText( userMessage.content, contextInfo?.sources ) const result = _sources .filter(x => isDocSourceContext(x.kind)) .map(x => ({ sourceId: x.id, sourceKind: x.kind, sourceName: x.label })) if (enableSearchPages.value || pages?.length) { result.unshift({ sourceId: 'page', sourceKind: ContextSourceKind.Page, sourceName: 'Pages' }) } return result }, [ contextInfo?.sources, userMessage?.content, enableSearchPages.value, pages?.length ]) // When onApplyInEditor is null, it means isInEditor === false, thus there's no need to showExternalLink const isInEditor = !!onApplyInEditor const onContextClick = (context: RelevantCodeContext, isClient?: boolean) => { if (context.kind !== 'file') { return } // When isInEditor is false, we are in the code browser. // The `openInEditor` function implementation as `openInCodeBrowser`, // and will navigate to target without opening a new tab. // So we use `openInEditor` here. if (isClient || !isInEditor) { openInEditor(getFileLocationFromContext(context)) } else { const url = buildCodeBrowserUrlForContext(window.location.href, context) openExternal(url) } } const onCodeCitationClick = (code: AttachmentCodeItem) => { const ctx: FileContext = { gitUrl: code.gitUrl, content: code.content, filepath: code.filepath, kind: 'file', range: getRangeFromAttachmentCode(code) } onContextClick(ctx, code.isClient) } const onLinkClick = (url: string) => { openExternal(url) } return (

Tabby

{!!message.codeSourceId ? ( ) : ( )} {!!docQuerySources?.length && ( )} {isLoading && !message?.content ? ( ) : ( <> {!!message.error && } )}

) } function getCopyContent( content: string, attachmentCode?: Array ) { if (!attachmentCode || isEmpty(attachmentCode)) return content const parsedContent = content .replace(MARKDOWN_CITATION_REGEX, match => { const citationNumberMatch = match?.match(/\d+/) return `[${citationNumberMatch}]` }) .trim() const codeCitations = attachmentCode .map((code, idx) => { const lineRangeText = getRangeTextFromAttachmentCode(code) const filenameText = compact([code.filepath, lineRangeText]).join(':') return `[${idx + 1}] ${filenameText}` }) .join('\n') ?? '' return `${parsedContent}\n\nCitations:\n${codeCitations}` } function AssistantMessageCardActions(props: AssistantMessageActionProps) { const { handleMessageAction, isLoading: isGenerating, onCopyContent } = React.useContext(ChatContext) const { message, userMessageId, enableRegenerating, attachmentCode } = props const copyContent = useMemo(() => { return getCopyContent(message.content, attachmentCode) }, [message.content, attachmentCode]) return ( {!isGenerating && enableRegenerating && ( )} ) } function MessagePendingIndicator() { return (

) } function IconTabby({ className }: { className?: string }) { return ( tabby

) } function ChatMessageActionsWrapper({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { QuestionAnswerList }