Chat UI

backend/danswer/server/features/prompt/models.py

@@ -9,9 +9,9 @@ class CreatePromptRequest(BaseModel):
     shared: bool
     system_prompt: str
     task_prompt: str
-    include_citations: bool
-    datetime_aware: bool
-    persona_ids: list[int]
+    include_citations: bool = False
+    datetime_aware: bool = False
+    persona_ids: list[int] | None = None
 
 
 class PromptSnapshot(BaseModel):

backend/danswer/server/query_and_chat/chat_backend.py

@@ -59,6 +59,7 @@ def get_user_chat_sessions(
             ChatSessionDetails(
                 id=chat.id,
                 name=chat.description,
+                persona_id=chat.persona_id,
                 time_created=chat.time_created.isoformat(),
             )
             for chat in chat_sessions

backend/danswer/server/query_and_chat/models.py

@@ -96,6 +96,7 @@ class RenameChatSessionResponse(BaseModel):
 class ChatSessionDetails(BaseModel):
     id: int
     name: str
+    persona_id: int
     time_created: str
 
 

web/next.config.js

@@ -24,20 +24,35 @@ const nextConfig = {
     // In production, something else (nginx in the one box setup) should take
     // care of this redirect. TODO (chris): better support setups where
     // web_server and api_server are on different machines.
-    if (process.env.NODE_ENV === "production") return [];
+    const defaultRedirects = [
+      {
+        source: "/",
+        destination: "/search",
+        permanent: true,
+      },
+    ];
 
-    return [
+    if (process.env.NODE_ENV === "production") return defaultRedirects;
+
+    return defaultRedirects.concat([
       {
-        source: "/api/stream-direct-qa:params*",
-        destination: "http://127.0.0.1:8080/stream-direct-qa:params*", // Proxy to Backend
+        source: "/api/chat/send-message:params*",
+        destination: "http://127.0.0.1:8080/chat/send-message:params*", // Proxy to Backend
         permanent: true,
       },
       {
-        source: "/api/stream-query-validation:params*",
-        destination: "http://127.0.0.1:8080/stream-query-validation:params*", // Proxy to Backend
+        source: "/api/query/stream-answer-with-quote:params*",
+        destination:
+          "http://127.0.0.1:8080/query/stream-answer-with-quote:params*", // Proxy to Backend
         permanent: true,
       },
-    ];
+      {
+        source: "/api/query/stream-query-validation:params*",
+        destination:
+          "http://127.0.0.1:8080/query/stream-query-validation:params*", // Proxy to Backend
+        permanent: true,
+      },
+    ]);
   },
   publicRuntimeConfig: {
     version,

web/src/app/admin/add-connector/page.tsx

@@ -13,20 +13,20 @@ function SourceTile({ sourceMetadata }: { sourceMetadata: SourceMetadata }) {
         flex-col 
         items-center 
         justify-center 
-        bg-dark-tremor-background-muted
         p-4 
         rounded-lg 
         w-40 
         cursor-pointer
+        bg-hover-light
         shadow-md
-        hover:bg-gray-800
+        hover:bg-hover
       `}
       href={sourceMetadata.adminUrl}
     >
       <SourceIcon sourceType={sourceMetadata.internalName} iconSize={24} />
-      <span className="font-medium text-sm text-gray-300 mt-2">
+      <Text className="font-medium text-sm mt-2">
         {sourceMetadata.displayName}
-      </span>
+      </Text>
     </Link>
   );
 }
@@ -42,26 +42,26 @@ export default function Page() {
   );
 
   return (
-    <div className="mx-auto container dark">
+    <div className="mx-auto container">
       <AdminPageTitle
         icon={<ConnectorIcon size={32} />}
         title="Add Connector"
       />
 
-      <div className="text-gray-300 text-sm">
+      <Text>
         Connect Danswer to your organization&apos;s knowledge sources.
         We&apos;ll automatically sync your data into Danswer, so you can find
         exactly what you&apos;re looking for in one place.
-      </div>
+      </Text>
 
       <div className="flex mt-8">
         <Title>Import Knowledge</Title>
       </div>
-      <div className="text-gray-300 text-sm">
+      <Text>
         Connect to pieces of knowledge that live outside your apps. Upload
         files, scrape websites, or connect to your organization&apos;s Google
         Site.
-      </div>
+      </Text>
       <div className="flex flex-wrap gap-4 p-4">
         {importedKnowledgeSources.map((source) => {
           return (
@@ -73,11 +73,11 @@ export default function Page() {
       <div className="flex mt-8">
         <Title>Setup Auto-Syncing from Apps</Title>
       </div>
-      <div className="text-gray-300 text-sm">
+      <Text>
         Setup auto-syncing from your organization&apos;s most used apps and
         services. Unless otherwise specified during the connector setup, we will
         pull in the latest updates from the source every 10 minutes.
-      </div>
+      </Text>
       <div className="flex flex-wrap gap-4 p-4">
         {appConnectionSources.map((source) => {
           return (

web/src/app/admin/bot/SlackBotConfigCreationForm.tsx

@@ -17,6 +17,7 @@ import {
   updateSlackBotConfig,
 } from "./lib";
 import {
+  Button,
   Card,
   Divider,
   Tab,
@@ -52,7 +53,7 @@ export const SlackBotCreationForm = ({
   );
 
   return (
-    <div className="dark">
+    <div>
       <Card>
         {popup}
         <Formik
@@ -193,7 +194,7 @@ export const SlackBotCreationForm = ({
                     Use either a Persona <b>or</b> Document Sets to control how
                     DanswerBot answers.
                   </Text>
-                  <div className="text-dark-tremor-content text-sm">
+                  <Text>
                     <ul className="list-disc mt-2 ml-4">
                       <li>
                         You should use a Persona if you also want to customize
@@ -204,7 +205,7 @@ export const SlackBotCreationForm = ({
                         which documents DanswerBot uses as references.
                       </li>
                     </ul>
-                  </div>
+                  </Text>
                   <Text className="mt-2">
                     <b>NOTE:</b> whichever tab you are when you submit the form
                     will be the one that is used. For example, if you are on the
@@ -245,17 +246,17 @@ export const SlackBotCreationForm = ({
                                     key={documentSet.id}
                                     className={
                                       `
-                              px-3 
-                              py-1
-                              rounded-lg 
-                              border
-                              border-gray-700 
-                              w-fit 
-                              flex 
-                              cursor-pointer ` +
+                                      px-3 
+                                      py-1
+                                      rounded-lg 
+                                      border
+                                      border-border 
+                                      w-fit 
+                                      flex 
+                                      cursor-pointer ` +
                                       (isSelected
-                                        ? " bg-gray-600"
-                                        : " bg-gray-900 hover:bg-gray-700")
+                                        ? " bg-hover"
+                                        : " bg-background hover:bg-hover-light")
                                     }
                                     onClick={() => {
                                       if (isSelected) {
@@ -289,7 +290,6 @@ export const SlackBotCreationForm = ({
                             value: persona.id,
                           };
                         })}
-                        includeDefault={true}
                       />
                     </TabPanel>
                   </TabPanels>
@@ -298,17 +298,13 @@ export const SlackBotCreationForm = ({
                 <Divider />
 
                 <div className="flex">
-                  <button
+                  <Button
                     type="submit"
                     disabled={isSubmitting}
-                    className={
-                      "bg-slate-500 hover:bg-slate-700 text-white " +
-                      "font-bold py-2 px-4 rounded focus:outline-none " +
-                      "focus:shadow-outline w-full max-w-sm mx-auto"
-                    }
+                    className="mx-auto w-64"
                   >
                     {isUpdate ? "Update!" : "Create!"}
-                  </button>
+                  </Button>
                 </div>
               </div>
             </Form>

web/src/app/admin/bot/SlackBotTokensForm.tsx

@@ -11,7 +11,7 @@ import {
   setSlackBotTokens,
   updateSlackBotConfig,
 } from "./lib";
-import { Card } from "@tremor/react";
+import { Button, Card } from "@tremor/react";
 
 interface SlackBotTokensFormProps {
   onClose: () => void;
@@ -64,17 +64,9 @@ export const SlackBotTokensForm = ({
               type="password"
             />
             <div className="flex">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className={
-                  "bg-slate-500 hover:bg-slate-700 text-white " +
-                  "font-bold py-2 px-4 rounded focus:outline-none " +
-                  "focus:shadow-outline w-full max-w-sm mx-auto"
-                }
-              >
+              <Button type="submit" disabled={isSubmitting}>
                 Set Tokens
-              </button>
+              </Button>
             </div>
           </Form>
         )}

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

@@ -62,7 +62,7 @@ async function Page({ params }: { params: { id: string } }) {
   const personas = (await personasResponse.json()) as Persona[];
 
   return (
-    <div className="container mx-auto dark">
+    <div className="container mx-auto">
       <InstantSSRAutoRefresh />
 
       <BackButton />

web/src/app/admin/bot/new/page.tsx

@@ -33,7 +33,7 @@ async function Page() {
   const personas = (await personasResponse.json()) as Persona[];
 
   return (
-    <div className="container mx-auto dark">
+    <div className="container mx-auto">
       <BackButton />
       <AdminPageTitle
         icon={<CPUIcon size={32} />}

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

@@ -173,15 +173,15 @@ const Main = () => {
   }
 
   return (
-    <div className="mb-8 dark">
+    <div className="mb-8">
       {popup}
 
       <Text className="mb-2">
         Setup a Slack bot that connects to Danswer. Once setup, you will be able
         to ask questions to Danswer directly from Slack. Additionally, you can:
       </Text>
 
-      <div className="text-dark-tremor-content text-sm mb-2">
+      <Text className="mb-2">
         <ul className="list-disc mt-2 ml-4">
           <li>
             Setup DanswerBot to automatically answer questions in certain
@@ -196,7 +196,7 @@ const Main = () => {
             UI.
           </li>
         </ul>
-      </div>
+      </Text>
 
       <Text className="mb-6">
         Follow the{" "}
@@ -226,7 +226,7 @@ const Main = () => {
               setSlackBotTokensModalIsOpen(!slackBotTokensModalIsOpen);
               console.log(slackBotTokensModalIsOpen);
             }}
-            variant="secondary"
+            color="blue"
             size="xs"
             className="mt-2"
             icon={slackBotTokensModalIsOpen ? FiChevronUp : FiChevronDown}
@@ -259,7 +259,7 @@ const Main = () => {
           <div className="mb-2"></div>
 
           <Link className="flex mb-3" href="/admin/bot/new">
-            <Button className="my-auto" variant="secondary" size="xs">
+            <Button className="my-auto" color="green" size="xs">
               New Slack Bot Configuration
             </Button>
           </Link>

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

@@ -1,6 +1,6 @@
 import { getNameFromPath } from "@/lib/fileUtils";
 import { ValidSources } from "@/lib/types";
-import { List, ListItem, Card, Title, Divider } from "@tremor/react";
+import { List, ListItem, Card, Title } from "@tremor/react";
 
 function convertObjectToString(obj: any): string | any {
   // Check if obj is an object and not an array or null

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

@@ -30,7 +30,6 @@ export function DeletionButton({ ccPair }: { ccPair: CCPairFullInfo }) {
     <div>
       {popup}
       <Button
-        variant="secondary"
         size="xs"
         color="red"
         onClick={() =>

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

@@ -19,7 +19,7 @@ export function ModifyStatusButtonCluster({
       {popup}
       {ccPair.connector.disabled ? (
         <Button
-          variant="secondary"
+          color="green"
           size="xs"
           onClick={() =>
             disableConnector(ccPair.connector, setPopup, () => router.refresh())
@@ -30,7 +30,7 @@ export function ModifyStatusButtonCluster({
         </Button>
       ) : (
         <Button
-          variant="secondary"
+          color="red"
           size="xs"
           onClick={() =>
             disableConnector(ccPair.connector, setPopup, () => router.refresh())

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

@@ -22,7 +22,7 @@ export function ReIndexButton({
       {popup}
       <Button
         className="ml-auto"
-        variant="secondary"
+        color="green"
         size="xs"
         onClick={async () => {
           const errorMsg = await runConnector(connectorId, [credentialId]);

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

@@ -56,14 +56,14 @@ export default async function Page({
   return (
     <>
       <SSRAutoRefresh />
-      <div className="mx-auto container dark">
+      <div className="mx-auto container">
         <div className="mb-4">
           <HealthCheckBanner />
         </div>
 
         <BackButton />
         <div className="pb-1 flex mt-1">
-          <h1 className="text-3xl font-bold">{ccPair.name}</h1>
+          <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
 
           <div className="ml-auto">
             <ModifyStatusButtonCluster ccPair={ccPair} />
@@ -76,9 +76,9 @@ export default async function Page({
           isDeleting={isDeleting}
         />
 
-        <div className="text-gray-400 text-sm mt-1">
+        <div className="text-sm mt-1">
           Total Documents Indexed:{" "}
-          <b className="text-gray-300">{totalDocsIndexed}</b>
+          <b className="text-emphasis">{totalDocsIndexed}</b>
         </div>
 
         <Divider />