fix: address review from colegottdank

Helicone · Oct 16, 2024 · e3adcba · e3adcba
1 parent e92356c
commit e3adcba
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 23 deletions.
diff --git a/web/components/templates/requestsV2/RequestsTable.tsx b/web/components/templates/requestsV2/RequestsTable.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  useTable,
+  useSortBy,
+  usePagination,
+} from 'react-table';
+
+interface Request {
+  request_id: string;
+  created_at: string;
+  status: string;
+  user: string;
+  cost: string;
+  model: string;
+  request_text: string;
+  response_text: string;
+  prompt_tokens: number;
+}
+
+interface RequestsTableProps {
+  requests: Request[];
+}
+
+const RequestsTable: React.FC<RequestsTableProps> = ({ requests }) => {
+  const data = React.useMemo(
+    () => requests,
+    [requests]
+  );
+
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Created At',
+        accessor: 'created_at',
+      },
+      {
+        Header: 'Status',
+        accessor: 'status',
+      },
+      {
+        Header: 'User',
+        accessor: 'user',
+      },
+      {
+        Header: 'Cost',
+        accessor: 'cost',
+      },
+      {
+        Header: 'Model',
+        accessor: 'model',
+        Cell: ({ cell: { value } }) => value || 'Unknown',
+      },
+      {
+        Header: 'Request',
+        accessor: 'request_text',
+      },
+      {
+        Header: 'Response',
+        accessor: 'response_text',
+      },
+      {
+        Header: 'Prompt Tokens',
+        accessor: 'prompt_tokens',
+      },
+    ],
+    []
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: { pageIndex: 0 },
+    },
+    useSortBy,
+    usePagination
+  );
+
+  return (
+    <div>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? ' 🔽'
+                        : ' 🔼'
+                      : ''}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {page.map(row => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+
+      <div className="pagination">
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+          {'<<'}
+        </button>{' '}
+        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+          {'<'}
+        </button>{' '}
+        <button onClick={() => nextPage()} disabled={!canNextPage}>
+          {'>'}
+        </button>{' '}
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+          {'>>'}
+        </button>{' '}
+        <span>
+          Page{' '}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>{' '}
+        </span>
+        <span>
+          | Go to page:{' '}
+          <input
+            type="number"
+            defaultValue={pageIndex + 1}
+            onChange={e => {
+              const page = e.target.value ? Number(e.target.value) - 1 : 0;
+              gotoPage(page);
+            }}
+            style={{ width: '100px' }}
+          />
+        </span>{' '}
+        <select
+          value={pageSize}
+          onChange={e => {
+            setPageSize(Number(e.target.value));
+          }}
+        >
+          {[10, 20, 30, 40, 50].map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <style jsx>{`
+        .pagination {
+          padding: 0.5rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default RequestsTable;
diff --git a/web/components/templates/requestsV2/builder/requestBuilder.tsx b/web/components/templates/requestsV2/builder/requestBuilder.tsx
@@ -152,23 +152,21 @@ const builders: {
 const getModelFromPath = (path: string) => {
   const regex1 = /\/engines\/([^/]+)/;
   const regex2 = /models\/([^/:]+)/;
+  const regex3 = /\/v\d+\/([^/]+)/;
 
-  let match = path.match(regex1);
+  let match = path.match(regex1) || path.match(regex2) || path.match(regex3);
 
-  if (!match) {
-    match = path.match(regex2);
-  }
-
-  if (match && match[1]) {
-    return match[1];
-  } else {
-    return undefined;
-  }
+  return match && match[1] ? match[1] : undefined;
 };
 
 const getRequestBuilder = (request: HeliconeRequest) => {
   let model =
-    request.request_model || getModelFromPath(request.target_url) || "";
+    request.response_model ||
+    request.model_override ||
+    request.request_model ||
+    getModelFromPath(request.target_url) ||
+    "";
+  console.log('Model extracted in getRequestBuilder:', model);
   const builderType = getBuilderType(
     model,
     request.provider,
@@ -195,16 +193,16 @@ const isAssistantRequest = (request: HeliconeRequest) => {
 const getNormalizedRequest = (request: HeliconeRequest): NormalizedRequest => {
   try {
     const normalizedRequest = getRequestBuilder(request).build();
-    if (!normalizedRequest.model || normalizedRequest.model === "") {
-      normalizedRequest.model = "Unsupported";
-    }
-    return normalizedRequest;
+    return {
+      ...normalizedRequest,
+      model: normalizedRequest.model || request.response_model || request.model_override || request.request_model || "Unknown",
+    };
   } catch (error) {
-    const normalizedRequest = getRequestBuilder(request).build();
-    if (!normalizedRequest.model || normalizedRequest.model === "") {
-      normalizedRequest.model = "Unsupported";
-    }
-    return normalizedRequest;
+    console.error("Error in getNormalizedRequest:", error);
+    return {
+      ...getRequestBuilder(request).build(),
+      model: request.response_model || request.model_override || request.request_model || "Unknown",
+    };
   }
 };
 

diff --git a/web/services/hooks/requests.tsx b/web/services/hooks/requests.tsx
@@ -120,29 +120,36 @@ const useGetRequestsWithBodies = (
       if (!content) return request;
 
       const model =
-        request.model_override ||
         request.response_model ||
+        request.model_override ||
         request.request_model ||
         content?.response?.model ||
         content?.request?.model ||
         content?.response?.body?.model ||
         getModelFromPath(request.target_url) ||
-        "";
+        "Unknown";
+
+      console.log('Extracted model:', model, 'for request:', request.request_id);
 
       let updatedRequest = {
         ...request,
         request_body: content.request,
         response_body: content.response,
+        model: model,
       };
 
       if (
         request.provider === "GOOGLE" &&
         model.toLowerCase().includes("gemini")
       ) {
-        updatedRequest.llmSchema = mapGeminiPro(
+        const mappedRequest = mapGeminiPro(
           updatedRequest as HeliconeRequest,
           model
         );
+        updatedRequest = {
+          ...mappedRequest,
+          model: model, // Ensure we keep our extracted model
+        };
       }
 
       return updatedRequest;