Merge pull request #17 from cloudera/mob/main

Minor UI changes and fixes

llm-service/app/services/caii.py

@@ -115,11 +115,16 @@ def get_caii_llm_models():
 def get_caii_embedding_models():
     # notes:
     # NameResolutionError is we can't contact the CAII_DOMAIN
-    # HTTPException (404) is we can't find the endpoint by name
 
     domain = os.environ['CAII_DOMAIN']
     endpoint_name = os.environ['CAII_EMBEDDING_ENDPOINT_NAME']
-    models = describe_endpoint(domain=domain, endpoint_name=endpoint_name)
+    try:
+        models = describe_endpoint(domain=domain, endpoint_name=endpoint_name)
+    except HTTPException as e:
+        if e.status_code == 404:
+            return [{"model_id": endpoint_name}]
+        else:
+            raise e
     return build_model_response(models)
 
 def build_model_response(models):

ui/src/api/modelsApi.ts

@@ -45,7 +45,7 @@ import {
 } from "src/api/utils.ts";
 
 export interface Model {
-  name: string;
+  name?: string;
   model_id: string;
   available?: boolean;
   replica_count?: number;

ui/src/pages/DataSources/ManageTab/UploadedFilesTable.tsx

@@ -67,6 +67,7 @@ import messageQueue from "src/utils/messageQueue.ts";
 import { useQueryClient } from "@tanstack/react-query";
 import { QueryKeys } from "src/api/utils.ts";
 import useModal from "src/utils/useModal.ts";
+import { cdlWhite } from "src/cuix/variables.ts";
 
 function SummaryPopover({
   dataSourceId,
@@ -101,7 +102,24 @@ const columns = (
   handleDeleteFile: (document: RagDocumentResponseType) => void,
 ): TableProps<RagDocumentResponseType>["columns"] => [
   {
-    title: <AiAssistantIcon />,
+    title: (
+      <Tooltip
+        title={
+          <Flex vertical gap={4}>
+            <Typography.Text style={{ color: cdlWhite }}>
+              Document Summary
+            </Typography.Text>
+            <Typography.Text style={{ fontSize: 10, color: cdlWhite }}>
+              Note: Document summarization can take a significant amount of
+              time, but will not impact the ability to use the document for
+              Chat.
+            </Typography.Text>
+          </Flex>
+        }
+      >
+        <AiAssistantIcon />
+      </Tooltip>
+    ),
     dataIndex: "summaryCreationTimestamp",
     key: "summaryCreationTimestamp",
     render: (timestamp: number | null, data) => {

ui/src/pages/Models/EmbeddingModelTable.tsx

@@ -36,72 +36,40 @@
  * DATA.
  ******************************************************************************/
 
-import { Button, Flex, Table, TableProps, Tooltip } from "antd";
+import { Table, TableProps } from "antd";
 import { Model, useTestEmbeddingModel } from "src/api/modelsApi.ts";
 import { useState } from "react";
-import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
-import { cdlGreen600, cdlRed600 } from "src/cuix/variables.ts";
+import { modelColumns, TestCell } from "pages/Models/ModelTable.tsx";
 
-const ModelTestCell = (props: {
-  available: boolean | undefined;
-  model_id: string;
-}) => {
+const EmbeddingModelTestCell = ({ model }: { model: Model }) => {
   const [testModel, setTestModel] = useState("");
-  const { data, isLoading } = useTestEmbeddingModel(testModel);
+  const {
+    data: testResult,
+    isLoading,
+    error,
+  } = useTestEmbeddingModel(testModel);
 
   const handleTestModel = () => {
-    setTestModel(props.model_id);
+    setTestModel(model.model_id);
   };
 
-  if (data === "ok") {
-    return <CheckCircleOutlined style={{ color: cdlGreen600 }} />;
-  }
-
   return (
-    <Flex gap={8}>
-      <Button
-        onClick={handleTestModel}
-        disabled={props.available != undefined && !props.available}
-        loading={isLoading}
-      >
-        Test
-      </Button>
-      {data && data !== "ok" && (
-        <Tooltip title="an error occurred">
-          <CloseCircleOutlined style={{ color: cdlRed600 }} />
-        </Tooltip>
-      )}
-    </Flex>
+    <TestCell
+      onClick={handleTestModel}
+      model={model}
+      loading={isLoading}
+      error={error}
+      testResult={testResult}
+    />
   );
 };
 
-const columns: TableProps<Model>["columns"] = [
-  {
-    title: "Model ID",
-    dataIndex: "model_id",
-    key: "model_id",
-  },
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-  },
-  {
-    title: "Status",
-    dataIndex: "available",
-    key: "available",
-    render: (available?: boolean) => {
-      if (available === undefined) {
-        return "Unknown";
-      }
-      return available ? "Available" : "Not Ready";
-    },
-  },
+const testCell: TableProps<Model>["columns"] = [
   {
     title: "Test",
     width: 140,
-    render: (_, { model_id, available }) => {
-      return <ModelTestCell available={available} model_id={model_id} />;
+    render: (_, model) => {
+      return <EmbeddingModelTestCell model={model} />;
     },
   },
 ];
@@ -116,7 +84,7 @@ const EmbeddingModelTable = ({
   return (
     <Table
       dataSource={embeddingModels}
-      columns={columns}
+      columns={modelColumns ? [...modelColumns, ...testCell] : testCell}
       style={{ width: "100%" }}
       loading={areEmbeddingModelsLoading}
       rowKey={(record) => record.model_id}

ui/src/pages/Models/InferenceModelTable.tsx

@@ -36,72 +36,36 @@
  * DATA.
  ******************************************************************************/
 
-import { Button, Flex, Table, TableProps, Tooltip } from "antd";
+import { Table, TableProps } from "antd";
 import { Model, useTestLlmModel } from "src/api/modelsApi.ts";
 import { useState } from "react";
-import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
-import { cdlGreen600, cdlRed600 } from "src/cuix/variables.ts";
+import { modelColumns, TestCell } from "pages/Models/ModelTable.tsx";
 
-const ModelTestCell = (props: {
-  available: boolean | undefined;
-  model_id: string;
-}) => {
+const InferenceModelTestCell = ({ model }: { model: Model }) => {
   const [testModel, setTestModel] = useState("");
-  const { data, isLoading, error } = useTestLlmModel(testModel);
+  const { data: testResult, isLoading, error } = useTestLlmModel(testModel);
 
   const handleTestModel = () => {
-    setTestModel(props.model_id);
+    setTestModel(model.model_id);
   };
 
-  if (data === "ok") {
-    return <CheckCircleOutlined style={{ color: cdlGreen600 }} />;
-  }
-
   return (
-    <Flex gap={8}>
-      <Button
-        onClick={handleTestModel}
-        disabled={props.available != undefined && !props.available}
-        loading={isLoading}
-      >
-        Test
-      </Button>
-      {error || (data && data !== "ok") ? (
-        <Tooltip title={error?.message ?? "an error occurred"}>
-          <CloseCircleOutlined style={{ color: cdlRed600 }} />
-        </Tooltip>
-      ) : null}
-    </Flex>
+    <TestCell
+      onClick={handleTestModel}
+      model={model}
+      loading={isLoading}
+      error={error}
+      testResult={testResult}
+    />
   );
 };
 
-const columns: TableProps<Model>["columns"] = [
-  {
-    title: "Model ID",
-    dataIndex: "model_id",
-    key: "model_id",
-  },
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-  },
-  {
-    title: "Status",
-    dataIndex: "available",
-    key: "available",
-    render: (available?: boolean) => {
-      if (available === undefined) {
-        return "Unknown";
-      }
-      return available ? "Available" : "Not Ready";
-    },
-  },
+const testCell: TableProps<Model>["columns"] = [
   {
     title: "Test",
     width: 140,
-    render: (_, { model_id, available }) => {
-      return <ModelTestCell available={available} model_id={model_id} />;
+    render: (_, model) => {
+      return <InferenceModelTestCell model={model} />;
     },
   },
 ];
@@ -116,7 +80,7 @@ const InferenceModelTable = ({
   return (
     <Table
       dataSource={inferenceModels}
-      columns={columns}
+      columns={modelColumns ? [...modelColumns, ...testCell] : testCell}
       style={{ width: "100%" }}
       loading={areInferenceModelsLoading}
       rowKey={(record) => record.model_id}

ui/src/pages/Models/ModelTable.tsx

@@ -0,0 +1,112 @@
+/*******************************************************************************
+ * CLOUDERA APPLIED MACHINE LEARNING PROTOTYPE (AMP)
+ * (C) Cloudera, Inc. 2024
+ * All rights reserved.
+ *
+ * Applicable Open Source License: Apache 2.0
+ *
+ * NOTE: Cloudera open source products are modular software products
+ * made up of hundreds of individual components, each of which was
+ * individually copyrighted.  Each Cloudera open source product is a
+ * collective work under U.S. Copyright Law. Your license to use the
+ * collective work is as provided in your written agreement with
+ * Cloudera.  Used apart from the collective work, this file is
+ * licensed for your use pursuant to the open source license
+ * identified above.
+ *
+ * This code is provided to you pursuant a written agreement with
+ * (i) Cloudera, Inc. or (ii) a third-party authorized to distribute
+ * this code. If you do not have a written agreement with Cloudera nor
+ * with an authorized and properly licensed third party, you do not
+ * have any rights to access nor to use this code.
+ *
+ * Absent a written agreement with Cloudera, Inc. ("Cloudera") to the
+ * contrary, A) CLOUDERA PROVIDES THIS CODE TO YOU WITHOUT WARRANTIES OF ANY
+ * KIND; (B) CLOUDERA DISCLAIMS ANY AND ALL EXPRESS AND IMPLIED
+ * WARRANTIES WITH RESPECT TO THIS CODE, INCLUDING BUT NOT LIMITED TO
+ * IMPLIED WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY AND
+ * FITNESS FOR A PARTICULAR PURPOSE; (C) CLOUDERA IS NOT LIABLE TO YOU,
+ * AND WILL NOT DEFEND, INDEMNIFY, NOR HOLD YOU HARMLESS FOR ANY CLAIMS
+ * ARISING FROM OR RELATED TO THE CODE; AND (D)WITH RESPECT TO YOUR EXERCISE
+ * OF ANY RIGHTS GRANTED TO YOU FOR THE CODE, CLOUDERA IS NOT LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, PUNITIVE OR
+ * CONSEQUENTIAL DAMAGES INCLUDING, BUT NOT LIMITED TO, DAMAGES
+ * RELATED TO LOST REVENUE, LOST PROFITS, LOSS OF INCOME, LOSS OF
+ * BUSINESS ADVANTAGE OR UNAVAILABILITY, OR LOSS OR CORRUPTION OF
+ * DATA.
+ ******************************************************************************/
+import { Button, Flex, TableProps, Tooltip, Typography } from "antd";
+import { Model } from "src/api/modelsApi.ts";
+import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
+import { cdlGreen600, cdlRed600 } from "src/cuix/variables.ts";
+
+export const TestCell = ({
+  onClick,
+  model,
+  loading,
+  error,
+  testResult,
+}: {
+  onClick: () => void;
+  model: Model;
+  loading: boolean;
+  error: Error | null;
+  testResult: string | undefined;
+}) => {
+  if (!model.name) {
+    return null;
+  }
+
+  if (testResult === "ok") {
+    return <CheckCircleOutlined style={{ color: cdlGreen600 }} />;
+  }
+
+  return (
+    <Flex gap={8}>
+      <Button
+        onClick={onClick}
+        disabled={model.available != undefined && !model.available}
+        loading={loading}
+      >
+        Test
+      </Button>
+      {error || (testResult && testResult !== "ok") ? (
+        <Tooltip title={error?.message ?? "an error occurred"}>
+          <CloseCircleOutlined style={{ color: cdlRed600 }} />
+        </Tooltip>
+      ) : null}
+    </Flex>
+  );
+};
+
+export const modelColumns: TableProps<Model>["columns"] = [
+  {
+    title: "Model ID",
+    dataIndex: "model_id",
+    key: "model_id",
+    width: 350,
+  },
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    width: 350,
+    render: (name?: string) =>
+      name ?? <Typography.Text type="warning">No model found</Typography.Text>,
+  },
+  {
+    title: "Status",
+    dataIndex: "available",
+    width: 150,
+    key: "available",
+    render: (_, model) => {
+      if (!model.name) {
+        return null;
+      }
+      if (model.available === undefined) {
+        return "Unknown";
+      }
+      return model.available ? "Available" : "Not Ready";
+    },
+  },
+];

ui/src/pages/RagChatTab/FooterComponents/RagChatQueryInput.tsx

@@ -129,8 +129,10 @@ const RagChatQueryInput = () => {
             onChange={(e) => {
               setUserInput(e.target.value);
             }}
-            onPressEnter={() => {
-              handleChat(userInput);
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleChat(userInput);
+              }
             }}
             disabled={!dataSourceSize || chatMutation.isPending}
           />