Feature/rebranding/web dev review no.8

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -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>
@@ -675,7 +675,7 @@ export function AssistantEditor({
                             OpenAI docs
                           </a>
                           .
-                        </Text>
+                        </p>
 
                         <div className="flex mt-6">
                           <div className="w-96">
@@ -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

web/src/app/admin/assistants/AssistantTable.tsx

@@ -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.
@@ -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>

web/src/app/admin/assistants/[id]/DeleteAssistantButton.tsx

@@ -31,7 +31,7 @@ export function DeleteAssistantButton({
       }}
       variant="destructive"
     >
-      <Trash size={16} /> Delete
+      <Trash size={16} /> Delete Assistant
     </Button>
   );
 }

web/src/app/admin/assistants/[id]/page.tsx

@@ -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>
       </>
     );

web/src/app/admin/assistants/page.tsx

@@ -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} />
@@ -54,7 +52,7 @@ export default async function Page() {
 
         <Divider />
 
-        <Title>Existing Assistants</Title>
+        <h3>Existing Assistants</h3>
         <AssistantsTable assistants={assistants} />
       </div>
     </div>

web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx

@@ -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">

web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx

@@ -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 && (

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -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";
@@ -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
@@ -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>

web/src/app/admin/connectors/aws-s3/page.tsx

@@ -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 ? (
         <>
           {" "}
@@ -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>
@@ -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>

web/src/app/admin/connectors/cloudflare-r2/page.tsx

@@ -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 ? (
         <>
           {" "}
@@ -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>
@@ -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>

web/src/app/admin/connectors/confluence/page.tsx

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