diff --git a/README.md b/README.md index 17e2ad1ae50..6738087611d 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,20 @@

- Sim Logo + + + + Sim Logo +

The open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.

- Sim.ai + Sim.ai Discord Twitter - Documentation + Documentation

@@ -42,7 +46,7 @@ Upload documents to a vector store and let agents answer questions grounded in y ### Cloud-hosted: [sim.ai](https://sim.ai) -Sim.ai +Sim.ai ### Self-hosted: NPM Package @@ -70,43 +74,7 @@ docker compose -f docker-compose.prod.yml up -d Open [http://localhost:3000](http://localhost:3000) -#### Using Local Models with Ollama - -Run Sim with local AI models using [Ollama](https://ollama.ai) - no external APIs required: - -```bash -# Start with GPU support (automatically downloads gemma3:4b model) -docker compose -f docker-compose.ollama.yml --profile setup up -d - -# For CPU-only systems: -docker compose -f docker-compose.ollama.yml --profile cpu --profile setup up -d -``` - -Wait for the model to download, then visit [http://localhost:3000](http://localhost:3000). Add more models with: -```bash -docker compose -f docker-compose.ollama.yml exec ollama ollama pull llama3.1:8b -``` - -#### Using an External Ollama Instance - -If Ollama is running on your host machine, use `host.docker.internal` instead of `localhost`: - -```bash -OLLAMA_URL=http://host.docker.internal:11434 docker compose -f docker-compose.prod.yml up -d -``` - -On Linux, use your host's IP address or add `extra_hosts: ["host.docker.internal:host-gateway"]` to the compose file. - -#### Using vLLM - -Sim supports [vLLM](https://docs.vllm.ai/) for self-hosted models. Set `VLLM_BASE_URL` and optionally `VLLM_API_KEY` in your environment. - -### Self-hosted: Dev Containers - -1. Open VS Code with the [Remote - Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) -2. Open the project and click "Reopen in Container" when prompted -3. Run `bun run dev:full` in the terminal or use the `sim-start` alias - - This starts both the main application and the realtime socket server +Sim also supports local models via [Ollama](https://ollama.ai) and [vLLM](https://docs.vllm.ai/) — see the [Docker self-hosting docs](https://docs.sim.ai/self-hosting/docker) for setup details. ### Self-hosted: Manual Setup @@ -159,18 +127,7 @@ Copilot is a Sim-managed service. To use Copilot on a self-hosted instance: ## Environment Variables -Key environment variables for self-hosted deployments. See [`.env.example`](apps/sim/.env.example) for defaults or [`env.ts`](apps/sim/lib/core/config/env.ts) for the full list. - -| Variable | Required | Description | -|----------|----------|-------------| -| `DATABASE_URL` | Yes | PostgreSQL connection string with pgvector | -| `BETTER_AUTH_SECRET` | Yes | Auth secret (`openssl rand -hex 32`) | -| `BETTER_AUTH_URL` | Yes | Your app URL (e.g., `http://localhost:3000`) | -| `NEXT_PUBLIC_APP_URL` | Yes | Public app URL (same as above) | -| `ENCRYPTION_KEY` | Yes | Encrypts environment variables (`openssl rand -hex 32`) | -| `INTERNAL_API_SECRET` | Yes | Encrypts internal API routes (`openssl rand -hex 32`) | -| `API_ENCRYPTION_KEY` | Yes | Encrypts API keys (`openssl rand -hex 32`) | -| `COPILOT_API_KEY` | No | API key from sim.ai for Copilot features | +See the [environment variables reference](https://docs.sim.ai/self-hosting/environment-variables) for the full list, or [`apps/sim/.env.example`](apps/sim/.env.example) for defaults. ## Tech Stack diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 6512d7212f1..b8bd485ee75 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -54,11 +54,23 @@ html[data-sidebar-collapsed] .sidebar-container .text-small { transition: opacity 60ms ease; } +.sidebar-container .sidebar-collapse-show { + opacity: 0; + pointer-events: none; + transition: opacity 120ms ease-out; +} + .sidebar-container[data-collapsed] .sidebar-collapse-hide, html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide { opacity: 0; } +.sidebar-container[data-collapsed] .sidebar-collapse-show, +html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-show { + opacity: 1; + pointer-events: auto; +} + html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove { display: none; } diff --git a/apps/sim/app/api/copilot/chat/rename/route.ts b/apps/sim/app/api/copilot/chat/rename/route.ts deleted file mode 100644 index 3dedbea5cba..00000000000 --- a/apps/sim/app/api/copilot/chat/rename/route.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { db } from '@sim/db' -import { copilotChats } from '@sim/db/schema' -import { createLogger } from '@sim/logger' -import { and, eq } from 'drizzle-orm' -import { type NextRequest, NextResponse } from 'next/server' -import { z } from 'zod' -import { getSession } from '@/lib/auth' -import { getAccessibleCopilotChat } from '@/lib/copilot/chat-lifecycle' -import { taskPubSub } from '@/lib/copilot/task-events' - -const logger = createLogger('RenameChatAPI') - -const RenameChatSchema = z.object({ - chatId: z.string().min(1), - title: z.string().min(1).max(200), -}) - -export async function PATCH(request: NextRequest) { - try { - const session = await getSession() - if (!session?.user?.id) { - return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 }) - } - - const body = await request.json() - const { chatId, title } = RenameChatSchema.parse(body) - - const chat = await getAccessibleCopilotChat(chatId, session.user.id) - if (!chat) { - return NextResponse.json({ success: false, error: 'Chat not found' }, { status: 404 }) - } - - const now = new Date() - const [updated] = await db - .update(copilotChats) - .set({ title, updatedAt: now, lastSeenAt: now }) - .where(and(eq(copilotChats.id, chatId), eq(copilotChats.userId, session.user.id))) - .returning({ id: copilotChats.id, workspaceId: copilotChats.workspaceId }) - - if (!updated) { - return NextResponse.json({ success: false, error: 'Chat not found' }, { status: 404 }) - } - - logger.info('Chat renamed', { chatId, title }) - - if (updated.workspaceId) { - taskPubSub?.publishStatusChanged({ - workspaceId: updated.workspaceId, - chatId, - type: 'renamed', - }) - } - - return NextResponse.json({ success: true }) - } catch (error) { - if (error instanceof z.ZodError) { - return NextResponse.json( - { success: false, error: 'Invalid request data', details: error.errors }, - { status: 400 } - ) - } - logger.error('Error renaming chat:', error) - return NextResponse.json({ success: false, error: 'Failed to rename chat' }, { status: 500 }) - } -} diff --git a/apps/sim/app/api/mothership/chats/[chatId]/route.ts b/apps/sim/app/api/mothership/chats/[chatId]/route.ts new file mode 100644 index 00000000000..b51b24a4ace --- /dev/null +++ b/apps/sim/app/api/mothership/chats/[chatId]/route.ts @@ -0,0 +1,217 @@ +import { db } from '@sim/db' +import { copilotChats } from '@sim/db/schema' +import { createLogger } from '@sim/logger' +import { and, eq, sql } from 'drizzle-orm' +import { type NextRequest, NextResponse } from 'next/server' +import { z } from 'zod' +import { getAccessibleCopilotChat } from '@/lib/copilot/chat-lifecycle' +import { appendCopilotLogContext } from '@/lib/copilot/logging' +import { getStreamMeta, readStreamEvents } from '@/lib/copilot/orchestrator/stream/buffer' +import { + authenticateCopilotRequestSessionOnly, + createBadRequestResponse, + createInternalServerErrorResponse, + createUnauthorizedResponse, +} from '@/lib/copilot/request-helpers' +import { taskPubSub } from '@/lib/copilot/task-events' + +const logger = createLogger('MothershipChatAPI') + +const UpdateChatSchema = z + .object({ + title: z.string().trim().min(1).max(200).optional(), + isUnread: z.boolean().optional(), + }) + .refine((data) => data.title !== undefined || data.isUnread !== undefined, { + message: 'At least one field must be provided', + }) + +export async function GET( + _request: NextRequest, + { params }: { params: Promise<{ chatId: string }> } +) { + try { + const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly() + if (!isAuthenticated || !userId) { + return createUnauthorizedResponse() + } + + const { chatId } = await params + if (!chatId) { + return createBadRequestResponse('chatId is required') + } + + const chat = await getAccessibleCopilotChat(chatId, userId) + if (!chat || chat.type !== 'mothership') { + return NextResponse.json({ success: false, error: 'Chat not found' }, { status: 404 }) + } + + let streamSnapshot: { + events: Array<{ eventId: number; streamId: string; event: Record }> + status: string + } | null = null + + if (chat.conversationId) { + try { + const [meta, events] = await Promise.all([ + getStreamMeta(chat.conversationId), + readStreamEvents(chat.conversationId, 0), + ]) + + streamSnapshot = { + events: events || [], + status: meta?.status || 'unknown', + } + } catch (error) { + logger.warn( + appendCopilotLogContext('Failed to read stream snapshot for mothership chat', { + messageId: chat.conversationId || undefined, + }), + { + chatId, + conversationId: chat.conversationId, + error: error instanceof Error ? error.message : String(error), + } + ) + } + } + + return NextResponse.json({ + success: true, + chat: { + id: chat.id, + title: chat.title, + messages: Array.isArray(chat.messages) ? chat.messages : [], + conversationId: chat.conversationId || null, + resources: Array.isArray(chat.resources) ? chat.resources : [], + createdAt: chat.createdAt, + updatedAt: chat.updatedAt, + ...(streamSnapshot ? { streamSnapshot } : {}), + }, + }) + } catch (error) { + logger.error('Error fetching mothership chat:', error) + return createInternalServerErrorResponse('Failed to fetch chat') + } +} + +export async function PATCH( + request: NextRequest, + { params }: { params: Promise<{ chatId: string }> } +) { + try { + const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly() + if (!isAuthenticated || !userId) { + return createUnauthorizedResponse() + } + + const { chatId } = await params + if (!chatId) { + return createBadRequestResponse('chatId is required') + } + + const body = await request.json() + const { title, isUnread } = UpdateChatSchema.parse(body) + + const updates: Record = {} + + if (title !== undefined) { + const now = new Date() + updates.title = title + updates.updatedAt = now + if (isUnread === undefined) { + updates.lastSeenAt = now + } + } + if (isUnread !== undefined) { + updates.lastSeenAt = isUnread ? null : sql`GREATEST(${copilotChats.updatedAt}, NOW())` + } + + const [updatedChat] = await db + .update(copilotChats) + .set(updates) + .where( + and( + eq(copilotChats.id, chatId), + eq(copilotChats.userId, userId), + eq(copilotChats.type, 'mothership') + ) + ) + .returning({ + id: copilotChats.id, + workspaceId: copilotChats.workspaceId, + }) + + if (!updatedChat) { + return NextResponse.json({ success: false, error: 'Chat not found' }, { status: 404 }) + } + + if (title !== undefined && updatedChat.workspaceId) { + taskPubSub?.publishStatusChanged({ + workspaceId: updatedChat.workspaceId, + chatId, + type: 'renamed', + }) + } + + return NextResponse.json({ success: true }) + } catch (error) { + if (error instanceof z.ZodError) { + return createBadRequestResponse('Invalid request data') + } + logger.error('Error updating mothership chat:', error) + return createInternalServerErrorResponse('Failed to update chat') + } +} + +export async function DELETE( + _request: NextRequest, + { params }: { params: Promise<{ chatId: string }> } +) { + try { + const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly() + if (!isAuthenticated || !userId) { + return createUnauthorizedResponse() + } + + const { chatId } = await params + if (!chatId) { + return createBadRequestResponse('chatId is required') + } + + const chat = await getAccessibleCopilotChat(chatId, userId) + if (!chat || chat.type !== 'mothership') { + return NextResponse.json({ success: true }) + } + + const [deletedChat] = await db + .delete(copilotChats) + .where( + and( + eq(copilotChats.id, chatId), + eq(copilotChats.userId, userId), + eq(copilotChats.type, 'mothership') + ) + ) + .returning({ + workspaceId: copilotChats.workspaceId, + }) + + if (!deletedChat) { + return NextResponse.json({ success: false, error: 'Chat not found' }, { status: 404 }) + } + + if (deletedChat.workspaceId) { + taskPubSub?.publishStatusChanged({ + workspaceId: deletedChat.workspaceId, + chatId, + type: 'deleted', + }) + } + + return NextResponse.json({ success: true }) + } catch (error) { + logger.error('Error deleting mothership chat:', error) + return createInternalServerErrorResponse('Failed to delete chat') + } +} diff --git a/apps/sim/app/api/mothership/chats/read/route.ts b/apps/sim/app/api/mothership/chats/read/route.ts deleted file mode 100644 index e75ffd28d36..00000000000 --- a/apps/sim/app/api/mothership/chats/read/route.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { db } from '@sim/db' -import { copilotChats } from '@sim/db/schema' -import { createLogger } from '@sim/logger' -import { and, eq, sql } from 'drizzle-orm' -import { type NextRequest, NextResponse } from 'next/server' -import { z } from 'zod' -import { - authenticateCopilotRequestSessionOnly, - createBadRequestResponse, - createInternalServerErrorResponse, - createUnauthorizedResponse, -} from '@/lib/copilot/request-helpers' - -const logger = createLogger('MarkTaskReadAPI') - -const MarkReadSchema = z.object({ - chatId: z.string().min(1), -}) - -export async function POST(request: NextRequest) { - try { - const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly() - if (!isAuthenticated || !userId) { - return createUnauthorizedResponse() - } - - const body = await request.json() - const { chatId } = MarkReadSchema.parse(body) - - await db - .update(copilotChats) - .set({ lastSeenAt: sql`GREATEST(${copilotChats.updatedAt}, NOW())` }) - .where(and(eq(copilotChats.id, chatId), eq(copilotChats.userId, userId))) - - return NextResponse.json({ success: true }) - } catch (error) { - if (error instanceof z.ZodError) { - return createBadRequestResponse('chatId is required') - } - logger.error('Error marking task as read:', error) - return createInternalServerErrorResponse('Failed to mark task as read') - } -} diff --git a/apps/sim/app/api/skills/import/route.ts b/apps/sim/app/api/skills/import/route.ts new file mode 100644 index 00000000000..9cbc6e32290 --- /dev/null +++ b/apps/sim/app/api/skills/import/route.ts @@ -0,0 +1,107 @@ +import { createLogger } from '@sim/logger' +import { type NextRequest, NextResponse } from 'next/server' +import { z } from 'zod' +import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid' +import { generateRequestId } from '@/lib/core/utils/request' + +const logger = createLogger('SkillsImportAPI') + +const FETCH_TIMEOUT_MS = 15_000 + +const ImportSchema = z.object({ + url: z.string().url('A valid URL is required'), +}) + +/** + * Converts a standard GitHub file URL to its raw.githubusercontent.com equivalent. + * + * Supported formats: + * github.com/{owner}/{repo}/blob/{branch}/{path} + * raw.githubusercontent.com/{owner}/{repo}/{branch}/{path} (passthrough) + */ +function toRawGitHubUrl(url: string): string { + const parsed = new URL(url) + + if (parsed.hostname === 'raw.githubusercontent.com') { + return url + } + + if (parsed.hostname !== 'github.com') { + throw new Error('Only GitHub URLs are supported') + } + + const segments = parsed.pathname.split('/').filter(Boolean) + if (segments.length < 5 || segments[2] !== 'blob') { + throw new Error( + 'Invalid GitHub URL format. Expected: https://github.com/{owner}/{repo}/blob/{branch}/{path}' + ) + } + + const [owner, repo, , branch, ...pathParts] = segments + return `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${pathParts.join('/')}` +} + +/** POST - Fetch a SKILL.md from a GitHub URL and return its raw content */ +export async function POST(req: NextRequest) { + const requestId = generateRequestId() + + try { + const authResult = await checkSessionOrInternalAuth(req, { requireWorkflowId: false }) + if (!authResult.success || !authResult.userId) { + logger.warn(`[${requestId}] Unauthorized skill import attempt`) + return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) + } + + const body = await req.json() + const { url } = ImportSchema.parse(body) + + let rawUrl: string + try { + rawUrl = toRawGitHubUrl(url) + } catch (err) { + const message = err instanceof Error ? err.message : 'Invalid URL' + return NextResponse.json({ error: message }, { status: 400 }) + } + + const response = await fetch(rawUrl, { + signal: AbortSignal.timeout(FETCH_TIMEOUT_MS), + headers: { Accept: 'text/plain' }, + }) + + if (!response.ok) { + logger.warn(`[${requestId}] GitHub fetch failed`, { + status: response.status, + url: rawUrl, + }) + return NextResponse.json( + { error: `Failed to fetch file (HTTP ${response.status}). Is the repository public?` }, + { status: 502 } + ) + } + + const contentLength = response.headers.get('content-length') + if (contentLength && Number.parseInt(contentLength, 10) > 100_000) { + return NextResponse.json({ error: 'File is too large (max 100KB)' }, { status: 400 }) + } + + const content = await response.text() + + if (content.length > 100_000) { + return NextResponse.json({ error: 'File is too large (max 100KB)' }, { status: 400 }) + } + + return NextResponse.json({ content }) + } catch (error) { + if (error instanceof z.ZodError) { + return NextResponse.json({ error: 'Invalid request', details: error.errors }, { status: 400 }) + } + + if (error instanceof Error && (error.name === 'AbortError' || error.name === 'TimeoutError')) { + logger.warn(`[${requestId}] GitHub fetch timed out`) + return NextResponse.json({ error: 'Request timed out' }, { status: 504 }) + } + + logger.error(`[${requestId}] Error importing skill`, error) + return NextResponse.json({ error: 'Failed to import skill' }, { status: 500 }) + } +} diff --git a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx index 9c3c10fd675..af9bc4f612f 100644 --- a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx +++ b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx @@ -8,6 +8,7 @@ interface ConversationListItemProps { isUnread?: boolean className?: string titleClassName?: string + statusIndicatorClassName?: string actions?: ReactNode } @@ -17,6 +18,7 @@ export function ConversationListItem({ isUnread = false, className, titleClassName, + statusIndicatorClassName, actions, }: ConversationListItemProps) { return ( @@ -24,10 +26,20 @@ export function ConversationListItem({ {isActive && ( - + )} {!isActive && isUnread && ( - + )} {title} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx index abc9e7272bd..237d08d9ba5 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx @@ -48,7 +48,7 @@ interface MothershipChatProps { const LAYOUT_STYLES = { 'mothership-view': { scrollContainer: - 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8 [scrollbar-gutter:stable]', + 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8 [scrollbar-gutter:stable_both-edges]', content: 'mx-auto max-w-[42rem] space-y-6', userRow: 'flex flex-col items-end gap-[6px] pt-3', attachmentWidth: 'max-w-[70%]', diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx index ee8eaf6126c..0c6b7d6acd5 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx @@ -299,7 +299,7 @@ export function Home({ chatId }: HomeProps = {}) { if (!hasMessages && !chatId) { return ( -

+

(null) const [selectedDescriptionDraft, setSelectedDescriptionDraft] = useState('') const [selectedDisplayNameDraft, setSelectedDisplayNameDraft] = useState('') - const [showCreateOAuthRequiredModal, setShowCreateOAuthRequiredModal] = useState(false) + const [createStep, setCreateStep] = useState<1 | 2>(1) + const [serviceSearch, setServiceSearch] = useState('') const [copyIdSuccess, setCopyIdSuccess] = useState(false) const [credentialToDelete, setCredentialToDelete] = useState(null) const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false) @@ -125,6 +123,7 @@ export function IntegrationsManager() { selectedCredential?.id ) + const createDraft = useCreateCredentialDraft() const createCredential = useCreateWorkspaceCredential() const updateCredential = useUpdateWorkspaceCredential() const deleteCredential = useDeleteWorkspaceCredential() @@ -155,12 +154,18 @@ export function IntegrationsManager() { const sortedCredentials = useMemo(() => { return [...filteredCredentials].sort((a, b) => { - const aDate = new Date(a.updatedAt).getTime() - const bDate = new Date(b.updatedAt).getTime() - return bDate - aDate + const aProvider = a.providerId || '' + const bProvider = b.providerId || '' + return aProvider.localeCompare(bProvider) }) }, [filteredCredentials]) + const filteredAvailableIntegrations = useMemo(() => { + if (!searchTerm.trim()) return oauthConnections + const normalized = searchTerm.toLowerCase() + return oauthConnections.filter((service) => service.name.toLowerCase().includes(normalized)) + }, [oauthConnections, searchTerm]) + const oauthServiceOptions = useMemo( () => oauthConnections.map((service) => ({ @@ -202,6 +207,14 @@ export function IntegrationsManager() { return getCanonicalScopesForProvider(createOAuthProviderId) }, [selectedOAuthService, createOAuthProviderId]) + const createDisplayScopes = useMemo( + () => + createOAuthRequiredScopes.filter( + (s) => !s.includes('userinfo.email') && !s.includes('userinfo.profile') + ), + [createOAuthRequiredScopes] + ) + const existingOAuthDisplayName = useMemo(() => { const name = createDisplayName.trim() if (!name) return null @@ -237,6 +250,8 @@ export function IntegrationsManager() { ...(isDisplayNameDirty ? { displayName: selectedDisplayNameDraft.trim() } : {}), ...(isDescriptionDirty ? { description: selectedDescriptionDraft.trim() || null } : {}), }) + if (isDisplayNameDirty) setSelectedDisplayNameDraft((v) => v.trim()) + if (isDescriptionDirty) setSelectedDescriptionDraft((v) => v.trim()) } await refetchCredentials() @@ -254,15 +269,17 @@ export function IntegrationsManager() { setShowUnsavedChangesAlert(true) } else { setSelectedCredentialId(null) + setSelectedDescriptionDraft('') + setSelectedDisplayNameDraft('') } }, [isDetailsDirty, isSavingDetails]) const handleDiscardChanges = useCallback(() => { setShowUnsavedChangesAlert(false) - setSelectedDescriptionDraft(selectedCredential?.description || '') - setSelectedDisplayNameDraft(selectedCredential?.displayName || '') + setSelectedDescriptionDraft('') + setSelectedDisplayNameDraft('') setSelectedCredentialId(null) - }, [selectedCredential]) + }, []) useEffect(() => { const handler = (e: BeforeUnloadEvent) => { @@ -290,7 +307,6 @@ export function IntegrationsManager() { pendingReturnOriginRef.current = request.returnOrigin setShowCreateModal(true) - setShowCreateOAuthRequiredModal(false) setCreateError(null) setCreateDescription('') setCreateOAuthProviderId(request.providerId) @@ -330,18 +346,6 @@ export function IntegrationsManager() { } }, [workspaceId, applyPendingCredentialCreateRequest]) - useEffect(() => { - if (!selectedCredential) { - setSelectedDescriptionDraft('') - setSelectedDisplayNameDraft('') - return - } - - setDetailsError(null) - setSelectedDescriptionDraft(selectedCredential.description || '') - setSelectedDisplayNameDraft(selectedCredential.displayName) - }, [selectedCredential]) - const isSelectedAdmin = selectedCredential?.role === 'admin' const selectedOAuthServiceConfig = useMemo(() => { if ( @@ -360,28 +364,16 @@ export function IntegrationsManager() { setCreateDescription('') setCreateOAuthProviderId('') setCreateError(null) - setShowCreateOAuthRequiredModal(false) + setCreateStep(1) + setServiceSearch('') pendingReturnOriginRef.current = undefined } const handleSelectCredential = (credential: WorkspaceCredential) => { setSelectedCredentialId(credential.id) setDetailsError(null) - } - - const handleCreateCredential = async () => { - if (!workspaceId) return - setCreateError(null) - - if (!selectedOAuthService) { - setCreateError('Select an OAuth service before connecting.') - return - } - if (!createDisplayName.trim()) { - setCreateError('Display name is required.') - return - } - setShowCreateOAuthRequiredModal(true) + setSelectedDescriptionDraft(credential.description || '') + setSelectedDisplayNameDraft(credential.displayName) } const handleConnectOAuthService = async () => { @@ -398,15 +390,11 @@ export function IntegrationsManager() { setCreateError(null) try { - await fetch('/api/credentials/draft', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - workspaceId, - providerId: selectedOAuthService.providerId, - displayName, - description: createDescription.trim() || undefined, - }), + await createDraft.mutateAsync({ + workspaceId, + providerId: selectedOAuthService.providerId, + displayName, + description: createDescription.trim() || undefined, }) const oauthPreCount = credentials.filter( @@ -490,6 +478,8 @@ export function IntegrationsManager() { if (selectedCredentialId === credentialToDelete.id) { setSelectedCredentialId(null) + setSelectedDescriptionDraft('') + setSelectedDisplayNameDraft('') } setShowDeleteConfirmDialog(false) setCredentialToDelete(null) @@ -539,16 +529,12 @@ export function IntegrationsManager() { setDetailsError(null) try { - await fetch('/api/credentials/draft', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - workspaceId, - providerId: selectedCredential.providerId, - displayName: selectedCredential.displayName, - description: selectedCredential.description || undefined, - credentialId: selectedCredential.id, - }), + await createDraft.mutateAsync({ + workspaceId, + providerId: selectedCredential.providerId, + displayName: selectedCredential.displayName, + description: selectedCredential.description || undefined, + credentialId: selectedCredential.id, }) const oauthPreCount = credentials.filter( @@ -618,8 +604,31 @@ export function IntegrationsManager() { } const hasCredentials = oauthCredentials && oauthCredentials.length > 0 + + const connectedProviderIds = useMemo( + () => new Set(oauthCredentials.map((c) => c.providerId).filter(Boolean) as string[]), + [oauthCredentials] + ) + const showNoResults = - searchTerm.trim() && sortedCredentials.length === 0 && oauthCredentials.length > 0 + searchTerm.trim() && + sortedCredentials.length === 0 && + filteredAvailableIntegrations.length === 0 + + const handleAddForProvider = useCallback((providerId: string) => { + setCreateOAuthProviderId(providerId) + setCreateStep(2) + setCreateDisplayName('') + setCreateDescription('') + setCreateError(null) + setShowCreateModal(true) + }, []) + + const filteredServices = useMemo(() => { + if (!serviceSearch.trim()) return oauthServiceOptions + const q = serviceSearch.toLowerCase() + return oauthServiceOptions.filter((s) => s.label.toLowerCase().includes(q)) + }, [oauthServiceOptions, serviceSearch]) const createModalJsx = ( - Connect Integration - - {(createError || existingOAuthDisplayName) && ( -
- {createError && ( - - {createError} - - )} - {existingOAuthDisplayName && ( - - An integration named "{existingOAuthDisplayName.displayName}" already exists. - - )} -
- )} -
-
-
- -
- option.value === createOAuthProviderId) - ?.label || '' - } - selectedValue={createOAuthProviderId} - onChange={(value) => { - setCreateOAuthProviderId(value) - setCreateError(null) - }} - placeholder='Select OAuth service' - searchable - searchPlaceholder='Search services...' - overlayContent={ - createOAuthProviderId - ? (() => { - const config = getServiceConfigByProviderId(createOAuthProviderId) - const label = - oauthServiceOptions.find((o) => o.value === createOAuthProviderId) - ?.label || '' - return ( -
- {config && - createElement(config.icon, { - className: 'h-[14px] w-[14px] flex-shrink-0', - })} - {label} -
- ) - })() - : undefined - } + {createStep === 1 ? ( + <> + Connect Integration + +
+
+ + setServiceSearch(e.target.value)} + className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0' + autoFocus />
+
+ {filteredServices.map((service) => { + const config = getServiceConfigByProviderId(service.value) + return ( + + ) + })} + {filteredServices.length === 0 && ( +
+ No services found +
+ )} +
-
- - setCreateDisplayName(event.target.value)} - placeholder='Integration name' - autoComplete='off' - data-lpignore='true' - className='mt-[6px]' - /> + + + + + + ) : ( + <> + +
+ + + Connect{' '} + {selectedOAuthService?.name || resolveProviderLabel(createOAuthProviderId)} +
-
- -