-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds documentation in the prompt section so that users can easily integrate their prompt in their environments via sdk.
- Loading branch information
Showing
16 changed files
with
612 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
...mitUuid]/documents/[documentUuid]/_components/DocumentationModal/_components/APIUsage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { CodeBlock, Text } from '@latitude-data/web-ui' | ||
|
||
export function APIUsage({ | ||
projectId, | ||
commitUuid, | ||
documentPath, | ||
apiKey, | ||
parameters, | ||
}: { | ||
projectId: number | ||
commitUuid: string | ||
documentPath: string | ||
apiKey: string | undefined | ||
parameters: Set<string> | ||
}) { | ||
const getRequestBodyContent = () => { | ||
const bodyContent = [` "path": "${documentPath}"`] | ||
|
||
if (parameters.size > 0) { | ||
const parameterEntries = Array.from(parameters) | ||
.map((key) => ` "${key}": ""`) | ||
.join(',\n') | ||
|
||
bodyContent.push(` "parameters": { | ||
${parameterEntries} | ||
}`) | ||
} | ||
|
||
return bodyContent.join(',\n') | ||
} | ||
|
||
const apiCode = ` | ||
curl -X POST \\ | ||
https://api.latitude.io/v1/projects/${projectId}/versions/${commitUuid}/documents/run \\ | ||
-H 'Authorization: Bearer ${apiKey ?? 'YOUR_API_KEY'}' \\ | ||
-H 'Content-Type: application/json' \\ | ||
-d '{ | ||
${getRequestBodyContent()} | ||
}' | ||
` | ||
|
||
return ( | ||
<div className='flex flex-col gap-4'> | ||
<Text.H4>You can use the Latitude API to run this document:</Text.H4> | ||
<CodeBlock language='bash'>{apiCode.trim()}</CodeBlock> | ||
</div> | ||
) | ||
} |
75 changes: 75 additions & 0 deletions
75
...]/documents/[documentUuid]/_components/DocumentationModal/_components/JavascriptUsage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import React from 'react' | ||
|
||
import { HEAD_COMMIT } from '@latitude-data/core/browser' | ||
import { CodeBlock, Text } from '@latitude-data/web-ui' | ||
|
||
export function JavascriptUsage({ | ||
projectId, | ||
commitUuid, | ||
documentPath, | ||
apiKey, | ||
parameters, | ||
}: { | ||
projectId: number | ||
commitUuid: string | ||
documentPath: string | ||
apiKey: string | undefined | ||
parameters: Set<string> | ||
}) { | ||
const getParametersString = () => { | ||
if (parameters.size === 0) return '' | ||
|
||
const parameterEntries = Array.from(parameters) | ||
.map((key) => ` ${key}: ''`) | ||
.join(',\n') | ||
|
||
return ` parameters: { | ||
${parameterEntries} | ||
}` | ||
} | ||
|
||
const getRunOptions = () => { | ||
const options = [] | ||
|
||
if (commitUuid !== HEAD_COMMIT) { | ||
options.push(` versionUuid: '${commitUuid}'`) | ||
} | ||
|
||
const parametersString = getParametersString() | ||
if (parametersString) { | ||
options.push(parametersString) | ||
} | ||
|
||
return options.length > 0 ? `{\n${options.join(',\n')}\n}` : '' | ||
} | ||
|
||
const sdkCode = `import { Latitude } from '@latitude-data/sdk' | ||
// Do not expose the API key in client-side code | ||
const sdk = new Latitude('${apiKey ?? 'YOUR_API_KEY'}', { projectId: ${projectId} }) | ||
const result = await sdk.run('${documentPath}'${getRunOptions() ? `, ${getRunOptions()}` : ''}) | ||
` | ||
|
||
return ( | ||
<div className='flex flex-col gap-4'> | ||
<Text.H4> | ||
To run this document programmatically, First install the SDK: | ||
</Text.H4> | ||
<CodeBlock language='bash'>npm install @latitude-data/sdk</CodeBlock> | ||
<Text.H4>Then, use the following code to run the document:</Text.H4> | ||
<CodeBlock language='typescript'>{sdkCode}</CodeBlock> | ||
<Text.H4> | ||
Check out{' '} | ||
<a | ||
target='_blank' | ||
className='text-primary underline' | ||
href='https://docs.latitude.so' | ||
> | ||
our docs | ||
</a>{' '} | ||
for more details. | ||
</Text.H4> | ||
</div> | ||
) | ||
} |
90 changes: 90 additions & 0 deletions
90
...uid]/documents/[documentUuid]/_components/DocumentationModal/_components/SettingsTabs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
'use client' | ||
|
||
import React, { useState } from 'react' | ||
|
||
import { ApiKey, DocumentVersion } from '@latitude-data/core/browser' | ||
|
||
import { APIUsage } from './APIUsage' | ||
import { JavascriptUsage } from './JavascriptUsage' | ||
|
||
type TabItem = { | ||
id: string | ||
label: string | ||
} | ||
|
||
const Tabs: React.FC<{ | ||
tabs: TabItem[] | ||
activeTab: string | ||
onChange: (tabId: string) => void | ||
}> = ({ tabs, activeTab, onChange }) => { | ||
return ( | ||
<div className='flex border-b border-gray-200'> | ||
{tabs.map((tab) => ( | ||
<button | ||
key={tab.id} | ||
className={`px-4 py-2 font-medium ${ | ||
activeTab === tab.id | ||
? 'border-b-2 border-primary text-primary' | ||
: 'text-muted-foreground' | ||
}`} | ||
onClick={() => onChange(tab.id)} | ||
> | ||
{tab.label} | ||
</button> | ||
))} | ||
</div> | ||
) | ||
} | ||
|
||
const tabs: TabItem[] = [ | ||
{ id: 'sdk', label: 'Javascript' }, | ||
{ id: 'api', label: 'HTTP API' }, | ||
] | ||
|
||
interface SettingsTabsProps { | ||
projectId: number | ||
commitUuid: string | ||
document: DocumentVersion | ||
apiKeys: ApiKey[] | ||
parameters: Set<string> | ||
} | ||
|
||
export function SettingsTabs({ | ||
projectId, | ||
commitUuid, | ||
document, | ||
apiKeys, | ||
parameters, | ||
}: SettingsTabsProps) { | ||
const [activeTab, setActiveTab] = useState('sdk') | ||
|
||
return ( | ||
<div className='flex flex-col gap-4 border rounded-lg min-w-0'> | ||
<Tabs | ||
tabs={tabs} | ||
activeTab={activeTab} | ||
onChange={(tabId) => setActiveTab(tabId)} | ||
/> | ||
<div className='p-4'> | ||
{activeTab === 'sdk' && ( | ||
<JavascriptUsage | ||
apiKey={apiKeys[0]?.token} | ||
projectId={projectId} | ||
commitUuid={commitUuid} | ||
documentPath={document.path} | ||
parameters={parameters} | ||
/> | ||
)} | ||
{activeTab === 'api' && ( | ||
<APIUsage | ||
apiKey={apiKeys[0]?.token} | ||
projectId={projectId} | ||
commitUuid={commitUuid} | ||
documentPath={document.path} | ||
parameters={parameters} | ||
/> | ||
)} | ||
</div> | ||
</div> | ||
) | ||
} |
Oops, something went wrong.