feat(copilot): context (#1157)

* Copilot updates

* Set/get vars

* Credentials opener v1

* Progress

* Checkpoint?

* Context v1

* Workflow references

* Add knowledge base context

* Blocks

* Templates

* Much better pills

* workflow updates

* Major ui

* Workflow box colors

* Much i mproved ui

* Improvements

* Much better

* Add @ icon

* Welcome page

* Update tool names

* Matches

* UPdate ordering

* Good sort

* Good @ handling

* Update placeholder

* Updates

* Lint

* Almost there

* Wrapped up?

* Lint

* Builid error fix

* Build fix?

* Lint

* Fix load vars

Author: Sg312

apps/sim/app/api/copilot/chat/route.ts

@@ -39,14 +39,27 @@ const ChatMessageSchema = z.object({
   chatId: z.string().optional(),
   workflowId: z.string().min(1, 'Workflow ID is required'),
   mode: z.enum(['ask', 'agent']).optional().default('agent'),
-  depth: z.number().int().min(-2).max(3).optional().default(0),
+  depth: z.number().int().min(0).max(3).optional().default(0),
   prefetch: z.boolean().optional(),
   createNewChat: z.boolean().optional().default(false),
   stream: z.boolean().optional().default(true),
   implicitFeedback: z.string().optional(),
   fileAttachments: z.array(FileAttachmentSchema).optional(),
   provider: z.string().optional().default('openai'),
   conversationId: z.string().optional(),
+  contexts: z
+    .array(
+      z.object({
+        kind: z.enum(['past_chat', 'workflow', 'blocks', 'logs', 'knowledge', 'templates']),
+        label: z.string(),
+        chatId: z.string().optional(),
+        workflowId: z.string().optional(),
+        knowledgeId: z.string().optional(),
+        blockId: z.string().optional(),
+        templateId: z.string().optional(),
+      })
+    )
+    .optional(),
 })
 
 /**
@@ -81,7 +94,38 @@ export async function POST(req: NextRequest) {
       fileAttachments,
       provider,
       conversationId,
+      contexts,
     } = ChatMessageSchema.parse(body)
+    try {
+      logger.info(`[${tracker.requestId}] Received chat POST`, {
+        hasContexts: Array.isArray(contexts),
+        contextsCount: Array.isArray(contexts) ? contexts.length : 0,
+        contextsPreview: Array.isArray(contexts)
+          ? contexts.map((c: any) => ({
+              kind: c?.kind,
+              chatId: c?.chatId,
+              workflowId: c?.workflowId,
+              label: c?.label,
+            }))
+          : undefined,
+      })
+    } catch {}
+    // Preprocess contexts server-side
+    let agentContexts: Array<{ type: string; content: string }> = []
+    if (Array.isArray(contexts) && contexts.length > 0) {
+      try {
+        const { processContextsServer } = await import('@/lib/copilot/process-contents')
+        const processed = await processContextsServer(contexts as any, authenticatedUserId)
+        agentContexts = processed
+        logger.info(`[${tracker.requestId}] Contexts processed for request`, {
+          processedCount: agentContexts.length,
+          kinds: agentContexts.map((c) => c.type),
+          lengthPreview: agentContexts.map((c) => c.content?.length ?? 0),
+        })
+      } catch (e) {
+        logger.error(`[${tracker.requestId}] Failed to process contexts`, e)
+      }
+    }
 
     // Consolidation mapping: map negative depths to base depth with prefetch=true
     let effectiveDepth: number | undefined = typeof depth === 'number' ? depth : undefined
@@ -312,8 +356,15 @@ export async function POST(req: NextRequest) {
       ...(typeof effectiveDepth === 'number' ? { depth: effectiveDepth } : {}),
       ...(typeof effectivePrefetch === 'boolean' ? { prefetch: effectivePrefetch } : {}),
       ...(session?.user?.name && { userName: session.user.name }),
+      ...(agentContexts.length > 0 && { context: agentContexts }),
     }
 
+    try {
+      logger.info(`[${tracker.requestId}] About to call Sim Agent with context`, {
+        context: (requestPayload as any).context,
+      })
+    } catch {}
+
     const simAgentResponse = await fetch(`${SIM_AGENT_API_URL}/api/chat-completion-streaming`, {
       method: 'POST',
       headers: {
@@ -350,6 +401,11 @@ export async function POST(req: NextRequest) {
         content: message,
         timestamp: new Date().toISOString(),
         ...(fileAttachments && fileAttachments.length > 0 && { fileAttachments }),
+        ...(Array.isArray(contexts) && contexts.length > 0 && { contexts }),
+        ...(Array.isArray(contexts) &&
+          contexts.length > 0 && {
+            contentBlocks: [{ type: 'contexts', contexts: contexts as any, timestamp: Date.now() }],
+          }),
       }
 
       // Create a pass-through stream that captures the response
@@ -683,6 +739,11 @@ export async function POST(req: NextRequest) {
         content: message,
         timestamp: new Date().toISOString(),
         ...(fileAttachments && fileAttachments.length > 0 && { fileAttachments }),
+        ...(Array.isArray(contexts) && contexts.length > 0 && { contexts }),
+        ...(Array.isArray(contexts) &&
+          contexts.length > 0 && {
+            contentBlocks: [{ type: 'contexts', contexts: contexts as any, timestamp: Date.now() }],
+          }),
       }
 
       const assistantMessage = {

apps/sim/app/api/copilot/chats/route.ts

@@ -0,0 +1,39 @@
+import { desc, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import {
+  authenticateCopilotRequestSessionOnly,
+  createInternalServerErrorResponse,
+  createUnauthorizedResponse,
+} from '@/lib/copilot/auth'
+import { createLogger } from '@/lib/logs/console/logger'
+import { db } from '@/db'
+import { copilotChats } from '@/db/schema'
+
+const logger = createLogger('CopilotChatsListAPI')
+
+export async function GET(_req: NextRequest) {
+  try {
+    const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly()
+    if (!isAuthenticated || !userId) {
+      return createUnauthorizedResponse()
+    }
+
+    const chats = await db
+      .select({
+        id: copilotChats.id,
+        title: copilotChats.title,
+        workflowId: copilotChats.workflowId,
+        updatedAt: copilotChats.updatedAt,
+      })
+      .from(copilotChats)
+      .where(eq(copilotChats.userId, userId))
+      .orderBy(desc(copilotChats.updatedAt))
+
+    logger.info(`Retrieved ${chats.length} chats for user ${userId}`)
+
+    return NextResponse.json({ success: true, chats })
+  } catch (error) {
+    logger.error('Error fetching user copilot chats:', error)
+    return createInternalServerErrorResponse('Failed to fetch user chats')
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx

@@ -1,7 +1,21 @@
 'use client'
 
 import { type FC, memo, useEffect, useMemo, useState } from 'react'
-import { Check, Clipboard, Loader2, RotateCcw, ThumbsDown, ThumbsUp, X } from 'lucide-react'
+import {
+  Blocks,
+  Bot,
+  Check,
+  Clipboard,
+  Info,
+  LibraryBig,
+  Loader2,
+  RotateCcw,
+  Shapes,
+  ThumbsDown,
+  ThumbsUp,
+  Workflow,
+  X,
+} from 'lucide-react'
 import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -31,6 +45,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const [showUpvoteSuccess, setShowUpvoteSuccess] = useState(false)
     const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
     const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
+    const [showAllContexts, setShowAllContexts] = useState(false)
 
     // Get checkpoint functionality from copilot store
     const {
@@ -357,6 +372,78 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
             </div>
           )}
 
+          {/* Context chips displayed above the message bubble, independent of inline text */}
+          {(Array.isArray((message as any).contexts) && (message as any).contexts.length > 0) ||
+          (Array.isArray(message.contentBlocks) &&
+            (message.contentBlocks as any[]).some((b: any) => b?.type === 'contexts')) ? (
+            <div className='flex items-center justify-end gap-0'>
+              <div className='min-w-0 max-w-[80%]'>
+                <div className='mb-1 flex flex-wrap justify-end gap-1.5'>
+                  {(() => {
+                    const direct = Array.isArray((message as any).contexts)
+                      ? ((message as any).contexts as any[])
+                      : []
+                    const block = Array.isArray(message.contentBlocks)
+                      ? (message.contentBlocks as any[]).find((b: any) => b?.type === 'contexts')
+                      : null
+                    const fromBlock = Array.isArray((block as any)?.contexts)
+                      ? ((block as any).contexts as any[])
+                      : []
+                    const allContexts = direct.length > 0 ? direct : fromBlock
+                    const MAX_VISIBLE = 4
+                    const visible = showAllContexts
+                      ? allContexts
+                      : allContexts.slice(0, MAX_VISIBLE)
+                    return (
+                      <>
+                        {visible.map((ctx: any, idx: number) => (
+                          <span
+                            key={`ctx-${idx}-${ctx?.label || ctx?.kind}`}
+                            className='inline-flex items-center gap-1 rounded-full bg-[color-mix(in_srgb,var(--brand-primary-hover-hex)_14%,transparent)] px-1.5 py-0.5 text-[11px] text-foreground'
+                            title={ctx?.label || ctx?.kind}
+                          >
+                            {ctx?.kind === 'past_chat' ? (
+                              <Bot className='h-3 w-3 text-muted-foreground' />
+                            ) : ctx?.kind === 'workflow' ? (
+                              <Workflow className='h-3 w-3 text-muted-foreground' />
+                            ) : ctx?.kind === 'blocks' ? (
+                              <Blocks className='h-3 w-3 text-muted-foreground' />
+                            ) : ctx?.kind === 'knowledge' ? (
+                              <LibraryBig className='h-3 w-3 text-muted-foreground' />
+                            ) : ctx?.kind === 'templates' ? (
+                              <Shapes className='h-3 w-3 text-muted-foreground' />
+                            ) : (
+                              <Info className='h-3 w-3 text-muted-foreground' />
+                            )}
+                            <span className='max-w-[140px] truncate'>
+                              {ctx?.label || ctx?.kind}
+                            </span>
+                          </span>
+                        ))}
+                        {allContexts.length > MAX_VISIBLE && (
+                          <button
+                            type='button'
+                            onClick={() => setShowAllContexts((v) => !v)}
+                            className='inline-flex items-center gap-1 rounded-full bg-[color-mix(in_srgb,var(--brand-primary-hover-hex)_10%,transparent)] px-1.5 py-0.5 text-[11px] text-foreground hover:bg-[color-mix(in_srgb,var(--brand-primary-hover-hex)_14%,transparent)]'
+                            title={
+                              showAllContexts
+                                ? 'Show less'
+                                : `Show ${allContexts.length - MAX_VISIBLE} more`
+                            }
+                          >
+                            {showAllContexts
+                              ? 'Show less'
+                              : `+${allContexts.length - MAX_VISIBLE} more`}
+                          </button>
+                        )}
+                      </>
+                    )
+                  })()}
+                </div>
+              </div>
+            </div>
+          ) : null}
+
           <div className='flex items-center justify-end gap-0'>
             {hasCheckpoints && (
               <div className='mr-1 inline-flex items-center justify-center'>
@@ -408,7 +495,39 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 }}
               >
                 <div className='whitespace-pre-wrap break-words font-normal text-base text-foreground leading-relaxed'>
-                  <WordWrap text={message.content} />
+                  {(() => {
+                    const text = message.content || ''
+                    const contexts: any[] = Array.isArray((message as any).contexts)
+                      ? ((message as any).contexts as any[])
+                      : []
+                    const labels = contexts.map((c) => c?.label).filter(Boolean) as string[]
+                    if (!labels.length) return <WordWrap text={text} />
+
+                    const escapeRegex = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                    const pattern = new RegExp(`@(${labels.map(escapeRegex).join('|')})`, 'g')
+
+                    const nodes: React.ReactNode[] = []
+                    let lastIndex = 0
+                    let match: RegExpExecArray | null
+                    while ((match = pattern.exec(text)) !== null) {
+                      const i = match.index
+                      const before = text.slice(lastIndex, i)
+                      if (before) nodes.push(before)
+                      const mention = match[0]
+                      nodes.push(
+                        <span
+                          key={`mention-${i}-${lastIndex}`}
+                          className='rounded-[6px] bg-[color-mix(in_srgb,var(--brand-primary-hover-hex)_14%,transparent)] px-1'
+                        >
+                          {mention}
+                        </span>
+                      )
+                      lastIndex = i + mention.length
+                    }
+                    const tail = text.slice(lastIndex)
+                    if (tail) nodes.push(tail)
+                    return nodes
+                  })()}
                 </div>
               </div>
             </div>