Merge pull request #155 from yello-xyz/v0.26

V0.26

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## PlayFetch Changelog
 
+### v0.26 - 2024-03-06
+- Add support for Mistral AI (Small, Large)
+- Add support for Anthropic Claude 3 (Sonnet, Opus)
+- Add support for system prompt in Anthropic models
+- Add support for Mistral embedding model (mistral-embed)
+
 ### v0.25 - 2024-02-15
 - Support for latest GPT-3.5 Turbo and GPT-4 Turbo Preview models (0125)
 - Support for new OpenAI embedding models (text-embedding-3-small, text-embedding-3-large)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "playfetch",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "author": "Yello XYZ Ltd",
   "private": true,
   "repository": {
@@ -23,14 +23,15 @@
     "format": "npx prettier -w '**/*.ts' '**/*.tsx' '**/*.css'"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.5.3",
+    "@anthropic-ai/sdk": "^0.16.1",
     "@dnd-kit/core": "^6.1.0",
     "@google-cloud/aiplatform": "^2.14.0",
     "@google-cloud/datastore": "^8.5.0",
     "@google-cloud/storage": "^7.1.0",
     "@google-cloud/vertexai": "^0.2.1",
     "@huggingface/inference": "^2.6.4",
     "@linear/sdk": "^13.0.0",
+    "@mistralai/mistralai": "github:yello-xyz/mistral-client-js",
     "@notionhq/client": "^2.2.13",
     "@pinecone-database/pinecone": "^1.1.0",
     "@react-hook/resize-observer": "^1.2.6",

src/client/chains/queryNodeEditor.tsx

@@ -5,8 +5,14 @@ import { EmbeddingModel, QueryChainItem, QueryProvider } from '@/types'
 import TextInput from '@/src/client/components/textInput'
 import Label from '@/src/client/components/label'
 import DropdownMenu from '@/src/client/components/dropdownMenu'
-import { EmbeddingModels, QueryProviders, LabelForProvider, ProviderForModel } from '@/src/common/providerMetadata'
-import { useCheckProviderAvailable } from '@/src/client/settings/providerContext'
+import {
+  EmbeddingModels,
+  QueryProviders,
+  LabelForProvider,
+  ProviderForModel,
+  FullLabelForModel,
+} from '@/src/common/providerMetadata'
+import useAvailableModelProviders, { useCheckProviderAvailable } from '@/src/client/settings/providerContext'
 import RangeInput from '@/src/client/components/rangeInput'
 import { ProviderWarning } from '@/src/client/prompts/modelUnavailableWarning'
 
@@ -25,6 +31,7 @@ export default function QueryNodeEditor({
   const updateTopK = (topK: number) => updateItem({ ...item, topK })
   const updateQuery = (query: string) => updateItem({ ...item, query })
 
+  const availableProviders = useAvailableModelProviders()
   const checkProviderAvailable = useCheckProviderAvailable()
   const isVectorStoreAvailable = checkProviderAvailable(item.provider)
   const isEmbeddingProviderAvailable = checkProviderAvailable(ProviderForModel(item.model))
@@ -51,7 +58,7 @@ export default function QueryNodeEditor({
             <DropdownMenu value={item.model} onChange={value => updateModel(value as EmbeddingModel)}>
               {EmbeddingModels.map(model => (
                 <option key={model} value={model} disabled={!checkProviderAvailable(ProviderForModel(model))}>
-                  {model}
+                  {FullLabelForModel(model, availableProviders)}
                 </option>
               ))}
             </DropdownMenu>

src/client/tables/tableEditor.tsx

@@ -173,7 +173,7 @@ export default function TableEditor({
     'absolute top-0 right-0 h-8 border-l border-b border-gray-200 w-7 flex items-center justify-center hover:bg-gray-50'
   return allVariables.length > 0 ? (
     <>
-      <div className='relative w-full'>
+      <div className={`relative w-full ${inModal ? 'h-full flex flex-col' : ''}`}>
         <div
           key={allVariables.join(',')}
           ref={containerRef}
@@ -201,6 +201,7 @@ export default function TableEditor({
           {Array.from({ length: rowCount }, (_, row) => {
             const border = (col: number) => `${gutterColumn || col > 0 ? 'border-l' : ''} border-b border-gray-200`
             const truncate = isRowActive(row) ? '' : 'max-h-[46px] line-clamp-2'
+            const inactiveStyle = (col: number) => `whitespace-pre-wrap break-words ${border(col)} ${truncate}`
             const iconPosition = (col: number) => (col === allVariables.length - 1 ? 'right-3' : 'right-0.5')
             const iconOpacity = (col: number) =>
               isCellActive(row, col) ? 'hover:opacity-100' : 'group-hover:opacity-100'
@@ -224,7 +225,7 @@ export default function TableEditor({
                           />
                         ) : (
                           <div
-                            className={`h-full px-2.5 py-1.5 whitespace-pre-wrap ${border(col)} ${truncate}`}
+                            className={`h-full px-2.5 py-1.5 ${inactiveStyle(col)}`}
                             onMouseDown={event => activateCell(event, row, col)}>
                             {(!entry || inView) && getInputValue(row, variable)}
                           </div>
@@ -244,6 +245,7 @@ export default function TableEditor({
             )
           })}
         </div>
+        {inModal && <div className={`flex-1 ${backgroundColor} border-b border-gray-200`} />}
         <div
           className={`${addRowButtonBaseClass} ${backgroundColor} ${addRowButtonCursor} ${addRowButtonRounded}`}
           onClick={canAddRow ? addRow : undefined}>

src/client/tables/useTestDataActionButtons.tsx

@@ -48,7 +48,7 @@ export default function useTestDataActionButtons(
             setTestConfig,
             reload: () => setTimeout(expandTestData),
           },
-          { top: 0, left: 100, right: 100, bottom: 0 }
+          { top: 50, left: 100, right: 100, bottom: 50 }
         )
       )
       return inputValues