Skip to content

Commit

Permalink
Feature/rebranding/web dev review no.8 (#121)
Browse files Browse the repository at this point in the history 
* feat: add visibility cell on document sets

* feat: add search for connecttor feature

* feat: add break-all on tooltip content

* feat: update sidebar animation

* feat: change font styles and padding

* feat: add security and billing tab

* feat: change to flex shrink

* Update page.tsx

* feat: add truncate

* feat: remove font-semibold on h3

* feat: change tremor title to h3

* feat: fix inconsistency on data sources

* feat: fix all admin inconsistency

* add padding

* feat: add FAB on chat and search

* feat: change NoCompleteSourcesModal to alert

---------

Co-authored-by: Kai Tecson <111247289+SchadenKai@users.noreply.github.com>
  • Loading branch information
@ervinpiol @SchadenKai
ervinpiol and SchadenKai authored Sep 17, 2024
1 parent 95283dd commit 38e499e
Show file tree
Hide file tree
Showing 85 changed files with 691 additions and 654 deletions.
8 changes: 4 additions & 4 deletions web/src/app/admin/assistants/AssistantEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,7 @@ export function AssistantEditor({
defaultHidden
>
<>
<Text>
<p className="text-sm">
Pick which LLM to use for this Assistant. If left as
Default, will use{" "}
<b className="italic">{defaultModelName}</b>
Expand All @@ -675,7 +675,7 @@ export function AssistantEditor({
OpenAI docs
</a>
.
</Text>
</p>

<div className="flex mt-6">
<div className="w-96">
Expand Down Expand Up @@ -746,12 +746,12 @@ export function AssistantEditor({
>
<>
<div className="pb-4">
<SubLabel>
<p className="text-sm">
Starter Messages help guide users to use this Assistant.
They are shown to the user as clickable options when
they select this Assistant. When selected, the specified
message is sent to the LLM as the initial user message.
</SubLabel>
</p>
</div>

<FieldArray
Expand Down
34 changes: 11 additions & 23 deletions web/src/app/admin/assistants/AssistantTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function AssistantsTable({ assistants }: { assistants: Assistant[] }) {

return (
<div>
<p className="pb-6">
<p className="pb-4 text-sm">
Assistants will be displayed as options on the Chat / Search interfaces
in the order they are displayed below. Assistants marked as hidden will
not be displayed.
Expand All @@ -93,28 +93,16 @@ export function AssistantsTable({ assistants }: { assistants: Assistant[] }) {
return {
id: assistant.id.toString(),
cells: [
<div key="name" className="flex gap-2 items-center">
{!assistant.default_assistant && (
<CustomTooltip
trigger={
<Button variant="ghost" size="icon">
<Pencil
size={16}
onClick={() =>
router.push(
`/admin/assistants/${
assistant.id
}?u=${Date.now()}`
)
}
/>
</Button>
}
asChild
>
Edit
</CustomTooltip>
)}
<div
key="name"
className="flex gap-4 items-center"
onClick={() =>
router.push(
`/admin/assistants/${assistant.id}?u=${Date.now()}`
)
}
>
{!assistant.default_assistant && <Pencil size={16} />}
<p className="text font-medium whitespace-normal break-none">
{assistant.name}
</p>
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/admin/assistants/[id]/DeleteAssistantButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function DeleteAssistantButton({
}}
variant="destructive"
>
<Trash size={16} /> Delete
<Trash size={16} /> Delete Assistant
</Button>
);
}
11 changes: 4 additions & 7 deletions web/src/app/admin/assistants/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,10 @@ export default async function Page({ params }: { params: { id: string } }) {
</Card>

<div className="mt-12">
<Title>Delete Assistant</Title>
<div className="flex mt-6">
<DeleteAssistantButton
assistantId={values.existingAssistant!.id}
redirectType={SuccessfulAssistantUpdateRedirectType.ADMIN}
/>
</div>
<DeleteAssistantButton
assistantId={values.existingAssistant!.id}
redirectType={SuccessfulAssistantUpdateRedirectType.ADMIN}
/>
</div>
</>
);
Expand Down
24 changes: 11 additions & 13 deletions web/src/app/admin/assistants/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,22 @@ export default async function Page() {
<div className="py-24 md:py-32 lg:pt-16">
<AdminPageTitle icon={<RobotIcon size={32} />} title="Assistants" />

<Text className="mb-2">
<p className="mb-2">
Assistants are a way to build custom search/question-answering
experiences for different use cases.
</Text>
<Text className="mt-2">They allow you to customize:</Text>
<div className="text-sm">
<ul className="list-disc mt-2 ml-4">
<li>
The prompt used by your LLM of choice to respond to the user query
</li>
<li>The documents that are used as context</li>
</ul>
</div>
</p>
<p className="mt-2">They allow you to customize:</p>
<ul className="list-disc mt-2 ml-4 text-sm">
<li>
The prompt used by your LLM of choice to respond to the user query
</li>
<li>The documents that are used as context</li>
</ul>

<div>
<Divider />

<Title>Create an Assistant</Title>
<h3>Create an Assistant</h3>
<Link href="/admin/assistants/new" className="flex items-center">
<Button className="mt-2">
<SquarePlus size={16} />
Expand All @@ -54,7 +52,7 @@ export default async function Page() {

<Divider />

<Title>Existing Assistants</Title>
<h3>Existing Assistants</h3>
<AssistantsTable assistants={assistants} />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function ConfigDisplay({

return (
<>
<h3 className="font-semibold mb-4">Configuration</h3>
<h3 className="mb-4 mt-12">Configuration</h3>
<Card>
<CardContent>
<ul className="flex flex-col gap-4">
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
<TableCell>{indexAttempt.total_docs_indexed}</TableCell>
<TableCell>
<div>
<p className="flex flex-wrap whitespace-normal">
<p className="flex flex-wrap whitespace-normal break-all">
{indexAttempt.error_msg || "-"}
</p>
{indexAttempt.full_exception_trace && (
Expand Down
16 changes: 6 additions & 10 deletions web/src/app/admin/connector/[ccPairId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { CCPairFullInfo } from "./types";
import { HealthCheckBanner } from "@/components/health/healthcheck";
import { CCPairStatus } from "@/components/Status";
import { BackButton } from "@/components/BackButton";
import { Divider, Title } from "@tremor/react";
import { IndexingAttemptsTable } from "./IndexingAttemptsTable";
import { Text } from "@tremor/react";
import { ConfigDisplay } from "./ConfigDisplay";
Expand Down Expand Up @@ -82,15 +81,15 @@ function Main({ ccPairId }: { ccPairId: number }) {
<div className="text-sm pt-5">
Total Documents Indexed: <b className="">{totalDocsIndexed}</b>
</div>
<Divider />

<ConfigDisplay
connectorSpecificConfig={ccPair.connector.connector_specific_config}
sourceType={ccPair.connector.source}
/>
{/* NOTE: no divider / title here for `ConfigDisplay` since it is optional and we need
to render these conditionally.*/}
<div className="flex items-start justify-between sm:items-center flex-col sm:flex-row gap-2 mt-20 mb-4">
<h3 className="font-semibold">Indexing Attempts</h3>
<div className="flex items-start justify-between sm:items-center flex-col sm:flex-row gap-2 mt-12 mb-4">
<h3>Indexing Attempts</h3>

{!CONNECTOR_TYPES_THAT_CANT_REINDEX.includes(
ccPair.connector.source
Expand All @@ -104,16 +103,13 @@ function Main({ ccPairId }: { ccPairId: number }) {
)}
</div>
<Card>
{/* <CardHeader className="border-b sm:pb-10">
</CardHeader> */}
<CardContent className="p-0">
<IndexingAttemptsTable ccPair={ccPair} />
</CardContent>
</Card>
<Divider />
<div className="mt-4">
<Title>Delete Connector</Title>

<div className="mt-12">
<h3>Delete Connector</h3>
<p className="text-sm text-subtle">
Deleting the connector will also delete all associated documents.
</p>
Expand Down
36 changes: 15 additions & 21 deletions web/src/app/admin/connectors/aws-s3/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ const S3Main = () => {

return (
<>
<Title className="mt-6 mb-2 ml-auto mr-auto">
Step 1: Provide your access info
</Title>
<h3 className="mb-2 ml-auto mr-auto">Step 1: Provide your access info</h3>
{s3Credential ? (
<>
{" "}
Expand Down Expand Up @@ -119,19 +117,17 @@ const S3Main = () => {
</>
) : (
<>
<Text>
<ul className="mt-2 ml-4 list-disc">
<li>
If AWS Access Key ID and AWS Secret Access Key are provided,
they will be used for authenticating the connector.
</li>
<li>Otherwise, the Profile Name will be used (if provided).</li>
<li>
If no credentials are provided, then the connector will try to
authenticate with any default AWS credentials available.
</li>
</ul>
</Text>
<ul className="mt-2 ml-4 list-disc text-sm">
<li>
If AWS Access Key ID and AWS Secret Access Key are provided, they
will be used for authenticating the connector.
</li>
<li>Otherwise, the Profile Name will be used (if provided).</li>
<li>
If no credentials are provided, then the connector will try to
authenticate with any default AWS credentials available.
</li>
</ul>
<Card className="mt-4">
<CardContent>
<CredentialForm<S3CredentialJson>
Expand Down Expand Up @@ -166,15 +162,13 @@ const S3Main = () => {
</>
)}

<Title className="mt-6 mb-2 ml-auto mr-auto">
<h3 className="mt-6 mb-2 ml-auto mr-auto">
Step 2: Which S3 bucket do you want to make searchable?
</Title>
</h3>

{s3ConnectorIndexingStatuses.length > 0 && (
<>
<Title className="mt-6 mb-2 ml-auto mr-auto">
S3 indexing status
</Title>
<h3 className="mt-6 mb-2 ml-auto mr-auto">S3 indexing status</h3>
<Text className="mb-2">
The latest changes are fetched every 10 minutes.
</Text>
Expand Down
28 changes: 11 additions & 17 deletions web/src/app/admin/connectors/cloudflare-r2/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ const R2Main = () => {

return (
<>
<Title className="mt-6 mb-2 ml-auto mr-auto">
Step 1: Provide your access info
</Title>
<h3 className="mb-2 ml-auto mr-auto">Step 1: Provide your access info</h3>
{r2Credential ? (
<>
{" "}
Expand Down Expand Up @@ -124,15 +122,13 @@ const R2Main = () => {
</>
) : (
<>
<Text>
<ul className="mt-2 ml-4 list-disc">
<li>
Provide your R2 Access Key ID, Secret Access Key, and Account ID
for authentication.
</li>
<li>These credentials will be used to access your R2 buckets.</li>
</ul>
</Text>
<ul className="mt-2 ml-4 list-disc text-sm">
<li>
Provide your R2 Access Key ID, Secret Access Key, and Account ID
for authentication.
</li>
<li>These credentials will be used to access your R2 buckets.</li>
</ul>
<Card className="mt-4">
<CardContent>
<CredentialForm<R2CredentialJson>
Expand Down Expand Up @@ -174,15 +170,13 @@ const R2Main = () => {
</>
)}

<Title className="mt-6 mb-2 ml-auto mr-auto">
<h3 className="mt-6 mb-2 ml-auto mr-auto">
Step 2: Which R2 bucket do you want to make searchable?
</Title>
</h3>

{r2ConnectorIndexingStatuses.length > 0 && (
<>
<Title className="mt-6 mb-2 ml-auto mr-auto">
R2 indexing status
</Title>
<h3 className="mt-6 mb-2 ml-auto mr-auto">R2 indexing status</h3>
<Text className="mb-2">
The latest changes are fetched every 10 minutes.
</Text>
Expand Down
16 changes: 8 additions & 8 deletions web/src/app/admin/connectors/confluence/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@ const Main = () => {

return (
<>
<Title className="mt-6 mb-2 ml-auto mr-auto">
<h3 className="mb-2 ml-auto mr-auto">
Step 1: Provide your access token
</Title>
</h3>

{confluenceCredential ? (
<>
Expand Down Expand Up @@ -151,7 +151,7 @@ const Main = () => {
</>
) : (
<>
<Text>
<p className="text-sm">
To use the Confluence connector, first follow the guide{" "}
<a
className="text-link"
Expand All @@ -161,7 +161,7 @@ const Main = () => {
here
</a>{" "}
to generate an Access Token.
</Text>
</p>
<Card className="mt-4">
<CardContent>
<CredentialForm<ConfluenceCredentialJson>
Expand Down Expand Up @@ -201,9 +201,9 @@ const Main = () => {
</>
)}

<Title className="mt-6">
<h3 className="mt-6 mb-2">
Step 2: Which spaces do you want to make searchable?
</Title>
</h3>
{confluenceCredential ? (
<>
<p className="mb-4 text-sm">
Expand Down Expand Up @@ -312,11 +312,11 @@ const Main = () => {
</Card>
</>
) : (
<Text>
<p className="text-sm">
Please provide your access token in Step 1 first! Once done with that,
you can then specify which Confluence spaces you want to make
searchable.
</Text>
</p>
)}
</>
);
Expand Down
Loading

0 comments on commit 38e499e

Please sign in to comment.