Merge pull request #131 from yello-xyz/v0.21

V0.21

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## PlayFetch Changelog
 
+### v0.21 - 2024-01-05
+- Improved text editor performance and usability
+- Show token counts in responses
+- Collapsible sidebar
+- Improved save prompt behaviour
+
 ### v0.20 - 2023-12-20
 - GitHub integration
 

components/button.tsx

@@ -34,6 +34,7 @@ export function PendingButton({
       type={type}
       disabled={disabled || isPending}
       roundedClass={roundedClass}
+      paddingClass={isPending ? 'pr-4 pl-2.5 py-1.5' : undefined}
       showSpinner={isPending}
       onClick={handleClick}
       onDisabledClick={onDisabledClick}>
@@ -46,6 +47,7 @@ export default function Button({
   type = 'primary',
   children,
   roundedClass = 'rounded-lg',
+  paddingClass = 'px-4 py-2',
   showSpinner,
   disabled,
   onClick,
@@ -54,6 +56,7 @@ export default function Button({
   type?: ButtonType
   children: ReactNode
   roundedClass?: string
+  paddingClass?: string
   showSpinner?: boolean
   disabled?: boolean
   onClick: () => void | Promise<any>
@@ -73,8 +76,6 @@ export default function Button({
     }
   }
 
-  const paddingClass = showSpinner ? 'pr-4 pl-2.5 py-1.5' : 'px-4 py-2'
-
   return (
     <div className='relative'>
       <button

components/chains/chainEditorHeader.tsx

@@ -82,7 +82,7 @@ function HeaderTitle({
           <span className='text-gray-400 whitespace-nowrap'>Version {versionIndex + 1}</span>
         ) : (
           <span className='px-2 py-1 text-gray-400 rounded bg-gray-50'>
-            {versionIsSaved ? 'Unpublished' : 'Unsaved'}
+            {versionIsSaved ? 'Draft Version' : 'Unsaved'}
           </span>
         ))}
     </div>

components/chains/promptNodeEditor.tsx

@@ -5,8 +5,7 @@ import { Allotment } from 'allotment'
 import { SingleTabHeader } from '../tabSelector'
 import { useState } from 'react'
 import promptIcon from '@/public/prompt.svg'
-import { LoadPendingVersion } from '../prompts/promptView'
-import useModifiedVersion from '@/src/client/hooks/useModifiedVersion'
+import usePromptVersion from '@/src/client/hooks/usePromptVersion'
 import { ChainPromptCache } from '../../src/client/hooks/useChainPromptCache'
 
 export default function PromptNodeEditor({
@@ -46,8 +45,7 @@ function PromptEditor({
   selectVersion: (version: PromptVersion) => void
   setModifiedVersion: (version: PromptVersion) => void
 }) {
-  const [currentVersion, updateVersion] = useModifiedVersion(activeVersion, setModifiedVersion)
-  const loadPendingVersion = LoadPendingVersion(prompt.versions, activeVersion, selectVersion, currentVersion)
+  const [updateVersion] = usePromptVersion(activeVersion, setModifiedVersion)
 
   const minVersionHeight = 120
   const [promptHeight, setPromptHeight] = useState(1)
@@ -59,7 +57,7 @@ function PromptEditor({
           <div className='flex-1 overflow-y-auto'>
             <VersionTimeline
               activeItem={prompt}
-              versions={prompt.versions.filter(version => version.didRun)}
+              versions={prompt.versions}
               activeVersion={activeVersion}
               setActiveVersion={selectVersion}
               tabSelector={() => <SingleTabHeader label='Prompt versions' icon={promptIcon} />}
@@ -72,7 +70,6 @@ function PromptEditor({
           <PromptPanel
             version={activeVersion}
             setModifiedVersion={updateVersion}
-            loadPendingVersion={loadPendingVersion}
             setPreferredHeight={setPromptHeight}
           />
         </div>