coral-web: Experimental feature mode in the UI (#49)

* add experiement features to cohere client

* add experimental features mode to UI

* remove fonts

* fix typo

* dont use overlay for settings panel

* rename fn + add description

src/backend/main.py

@@ -9,6 +9,7 @@
 from backend.routers.chat import router as chat_router
 from backend.routers.conversation import router as conversation_router
 from backend.routers.deployment import router as deployment_router
+from backend.routers.experimental_features import router as experimental_feature_router
 from backend.routers.tool import router as tool_router
 from backend.routers.user import router as user_router
 
@@ -30,6 +31,7 @@ def create_app():
     app.include_router(conversation_router)
     app.include_router(tool_router)
     app.include_router(deployment_router)
+    app.include_router(experimental_feature_router)
 
     app.add_middleware(
         CORSMiddleware,

src/interfaces/coral_web/src/cohere-client/client.ts

@@ -45,6 +45,10 @@ export class CohereStreamError extends Error {
 
 export type Fetch = (input: RequestInfo, init?: RequestInit) => Promise<Response>;
 
+export type ExperimentalFeatures = {
+  USE_EXPERIMENTAL_LANGCHAIN: boolean;
+};
+
 export class CohereClient {
   private readonly hostname: string;
   private readonly fetch: Fetch;
@@ -318,8 +322,32 @@ export class CohereClient {
     return body as Deployment[];
   }
 
+  public async getExperimentalFeatures(): Promise<ExperimentalFeatures> {
+    const response = await this.fetch(`${this.getEndpoint('experimental_features')}/`, {
+      method: 'GET',
+      headers: this.getHeaders(),
+    });
+
+    const body = await response.json();
+
+    if (response.status !== 200) {
+      throw new CohereNetworkError(
+        body?.message || body?.error || 'Something went wrong',
+        response.status
+      );
+    }
+
+    return body as ExperimentalFeatures;
+  }
+
   private getEndpoint(
-    endpoint: 'upload' | 'chat-stream' | 'conversations' | 'tools' | 'deployments'
+    endpoint:
+      | 'upload'
+      | 'chat-stream'
+      | 'conversations'
+      | 'tools'
+      | 'deployments'
+      | 'experimental_features'
   ) {
     return `${this.hostname}/${endpoint}`;
   }

src/interfaces/coral_web/src/cohere-client/generated/models/CohereChatRequest.ts

@@ -17,14 +17,14 @@ export type CohereChatRequest = {
   message: string;
   chat_history?: Array<ChatMessage> | null;
   conversation_id?: string;
+  tools?: Array<Tool> | null;
   documents?: Array<Record<string, any>>;
   model?: string | null;
   temperature?: number | null;
   k?: number | null;
   p?: number | null;
   preamble?: string | null;
   file_ids?: Array<string> | null;
-  tools?: Array<Tool> | null;
   search_queries_only?: boolean | null;
   max_tokens?: number | null;
   seed?: number | null;

src/interfaces/coral_web/src/cohere-client/generated/models/LangchainChatRequest.ts

@@ -10,12 +10,10 @@ import type { Tool } from './Tool';
 
 /**
  * Request shape for Langchain Streamed Chat.
- * See: https://github.com/cohere-ai/cohere-python/blob/main/src/cohere/base_client.py#L1629
  */
 export type LangchainChatRequest = {
   message: string;
   chat_history?: Array<ChatMessage> | null;
   conversation_id?: string;
-  preamble?: string | null;
-  tools?: Array<Tool>;
+  tools?: Array<Tool> | null;
 };

src/interfaces/coral_web/src/cohere-client/generated/models/StreamEnd.ts

@@ -10,8 +10,8 @@ import type { Document } from './Document';
 import type { SearchQuery } from './SearchQuery';
 
 export type StreamEnd = {
-  response_id: string;
-  generation_id: string;
+  response_id: string | null;
+  generation_id: string | null;
   conversation_id: string | null;
   text: string;
   citations?: Array<Citation>;

src/interfaces/coral_web/src/cohere-client/generated/services/DefaultService.ts

@@ -95,14 +95,14 @@ export class DefaultService {
    * @returns any Successful Response
    * @throws ApiError
    */
-  public static langchainChatStreamLangchainPost({
+  public static langchainChatStreamLangchainChatPost({
     requestBody,
   }: {
     requestBody: LangchainChatRequest;
   }): CancelablePromise<any> {
     return __request(OpenAPI, {
       method: 'POST',
-      url: '/langchain',
+      url: '/langchain-chat',
       body: requestBody,
       mediaType: 'application/json',
       errors: {
@@ -661,6 +661,21 @@ export class DefaultService {
       },
     });
   }
+  /**
+   * List Experimental Features
+   * List all experimental features and if they are enabled
+   *
+   * Returns:
+   * Dict[str, bool]: Experimental feature and their isEnabled state
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static listExperimentalFeaturesExperimentalFeaturesGet(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/experimental_features/',
+    });
+  }
   /**
    * Health
    * Health check for backend APIs

src/interfaces/coral_web/src/components/Configuration/Settings.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { Dropdown, InputLabel, STYLE_LEVEL_TO_CLASSES, Slider, Text } from '@/components/Shared';
 import { useListAllDeployments } from '@/hooks/deployments';
+import { useExperimentalFeatures } from '@/hooks/experimentalFeatures';
 import { useSettingsDefaults } from '@/hooks/settings';
 import { useParamsStore } from '@/stores';
 import { cn } from '@/utils';
@@ -16,6 +17,8 @@ export const Settings: React.FC = () => {
   } = useParamsStore();
   const defaults = useSettingsDefaults();
   const { data: deployments = [] } = useListAllDeployments();
+  const { data: experimentalFeatures } = useExperimentalFeatures();
+  const isLangchainModeOn = !!experimentalFeatures?.USE_EXPERIMENTAL_LANGCHAIN;
   const modelOptions = useMemo(() => {
     const selectedDeployment = deployments?.find(({ name }) => name === deployment);
     if (!selectedDeployment) return [];
@@ -36,6 +39,16 @@ export const Settings: React.FC = () => {
     });
   };
 
+  if (isLangchainModeOn) {
+    return (
+      <div className="flex items-center justify-center px-5">
+        <Text styleAs="p-lg" className="select-none text-center text-volcanic-900">
+          Currently settings are disabled with experimental Langchain multihop
+        </Text>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-y-6 px-5 pb-10">
       <Dropdown

src/interfaces/coral_web/src/components/Configuration/index.tsx

@@ -19,6 +19,7 @@ export const Configuration: React.FC = () => {
         tabs={TABS.map((t) => t.name)}
         selectedIndex={selectedIndex}
         onChange={setSelectedIndex}
+        tabGroupClassName="h-full"
         tabClassName="pt-2.5"
         panelsClassName="pt-7 lg:pt-7 px-0 flex flex-col rounded-b-lg bg-marble-100 md:rounded-b-none"
         fitTabsContent={true}

src/interfaces/coral_web/src/hooks/experimentalFeatures.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { ExperimentalFeatures, useCohereClient } from '@/cohere-client';
+
+/**
+ * @description Hook to get experimental features on/off status.
+ */
+export const useExperimentalFeatures = () => {
+  const cohereClient = useCohereClient();
+
+  return useQuery<ExperimentalFeatures>({
+    queryKey: ['experimentalFeatures'],
+    queryFn: async () => {
+      try {
+        return await cohereClient.getExperimentalFeatures();
+      } catch (e) {
+        console.error(e);
+        throw e;
+      }
+    },
+    refetchOnWindowFocus: false,
+  });
+};

src/interfaces/coral_web/src/pages/c/[id]/index.tsx

@@ -1,16 +1,18 @@
 import { DehydratedState, QueryClient, dehydrate } from '@tanstack/react-query';
 import { GetServerSideProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { CohereClient, Document } from '@/cohere-client';
 import Conversation from '@/components/Conversation';
 import { ConversationError } from '@/components/ConversationError';
 import ConversationListPanel from '@/components/ConversationList/ConversationListPanel';
 import { Layout, LayoutSection } from '@/components/Layout';
 import { Spinner } from '@/components/Shared';
+import { BannerContext } from '@/context/BannerContext';
 import { useConversation } from '@/hooks/conversation';
 import { useListDeployments } from '@/hooks/deployments';
+import { useExperimentalFeatures } from '@/hooks/experimentalFeatures';
 import { appSSR } from '@/pages/_app';
 import { useCitationsStore, useConversationStore, useParamsStore } from '@/stores';
 import { createStartEndKey, mapHistoryToMessages } from '@/utils';
@@ -27,6 +29,9 @@ const ConversationPage: NextPage<Props> = () => {
   } = useParamsStore();
   const { setConversation } = useConversationStore();
   const { addCitation, resetCitations } = useCitationsStore();
+  const { data: experimentalFeatures } = useExperimentalFeatures();
+  const isLangchainModeOn = !!experimentalFeatures?.USE_EXPERIMENTAL_LANGCHAIN;
+  const { setMessage } = useContext(BannerContext);
 
   const urlConversationId = Array.isArray(router.query.id)
     ? router.query.id[0]
@@ -79,6 +84,11 @@ const ConversationPage: NextPage<Props> = () => {
     });
   }, [conversation]);
 
+  useEffect(() => {
+    if (!isLangchainModeOn) return;
+    setMessage('You are using an experimental langchain multihop flow. There will be bugs.');
+  }, [isLangchainModeOn]);
+
   return (
     <Layout>
       <LayoutSection.LeftDrawer>

src/interfaces/coral_web/src/pages/index.tsx

@@ -1,12 +1,14 @@
 import { DehydratedState, QueryClient, dehydrate } from '@tanstack/react-query';
 import { GetServerSideProps, NextPage } from 'next';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { CohereClient } from '@/cohere-client';
 import Conversation from '@/components/Conversation';
 import ConversationListPanel from '@/components/ConversationList/ConversationListPanel';
 import { Layout, LayoutSection } from '@/components/Layout';
+import { BannerContext } from '@/context/BannerContext';
 import { useListDeployments } from '@/hooks/deployments';
+import { useExperimentalFeatures } from '@/hooks/experimentalFeatures';
 import { appSSR } from '@/pages/_app';
 import { useCitationsStore, useConversationStore, useParamsStore } from '@/stores';
 
@@ -25,6 +27,9 @@ const ChatPage: NextPage<Props> = () => {
     setParams,
   } = useParamsStore();
   const { data: availableDeployments } = useListDeployments();
+  const { data: experimentalFeatures } = useExperimentalFeatures();
+  const isLangchainModeOn = !!experimentalFeatures?.USE_EXPERIMENTAL_LANGCHAIN;
+  const { setMessage } = useContext(BannerContext);
 
   useEffect(() => {
     resetConversation();
@@ -37,6 +42,11 @@ const ChatPage: NextPage<Props> = () => {
     }
   }, [deployment, availableDeployments]);
 
+  useEffect(() => {
+    if (!isLangchainModeOn) return;
+    setMessage('You are using an experimental langchain multihop flow. There will be bugs.');
+  }, [isLangchainModeOn]);
+
   return (
     <Layout>
       <LayoutSection.LeftDrawer>

src/interfaces/coral_web/src/styles/fonts.css

@@ -12,4 +12,4 @@
   font-weight: normal;
   font-style: normal;
   font-display: block;
-}
+}

src/interfaces/coral_web/src/themes/cohereTheme.js

@@ -130,7 +130,7 @@ module.exports = {
         'icon-xl': ['36px', { lineHeight: '100%' }],
       },
       fontFamily: {
-        body: ['Arial',...defaultTheme.fontFamily.sans],
+        body: ['Arial', ...defaultTheme.fontFamily.sans],
         variable: ['Arial', ...defaultTheme.fontFamily.serif],
         code: defaultTheme.fontFamily.mono,
         iconOutline: ['CohereIconOutline'],