Add Host validation for LM Studio

src/components/HostInput.tsx

@@ -21,7 +21,7 @@ const HostInput = observer(({ connection, isEnabled }: HostInputProps) => {
 
   const {
     control,
-    formState: { dirtyFields },
+    formState: { dirtyFields, errors },
   } = useFormContext<SnapshotIn<IConnectionDataModel>>()
 
   const isDirty = dirtyFields.host
@@ -43,6 +43,7 @@ const HostInput = observer(({ connection, isEnabled }: HostInputProps) => {
           disabled={!isEnabled}
           placeholder={host}
           type='url'
+          errorMessage={errors.host?.message}
           description={
             <span className="flex flex-col gap-2 align-baseline text-sm md:flex-row">
               <span className='flex align-baseline'>
@@ -78,6 +79,9 @@ const HostInput = observer(({ connection, isEnabled }: HostInputProps) => {
       control={control}
       name="host"
       defaultValue={host}
+      rules={{
+        validate: connection.validateHost,
+      }}
     />
   )
 })

src/features/connections/servers/LmsServerConnection.tsx

@@ -61,6 +61,14 @@ class LmsServerConnection extends ServerConnection<ILmsModel> {
     ],
   })
 
+  validateHost(host?: string) {
+    if(!host) return true
+
+    if(!host.startsWith('ws')) return 'Host needs to start with ws:// or wss://'
+
+    return true
+  }
+
   async _fetchLmModels(host: string): Promise<LmsLanguageModel[]> {
     const client = new LMStudioClient({ baseUrl: host })
 

src/features/connections/servers/ServerConnection.tsx

@@ -66,6 +66,10 @@ abstract class ServerConnection<
     return host.trim()
   }
 
+  validateHost(): string | boolean {
+    return true
+  }
+
   protected abstract _fetchLmModels(host: string): Promise<Array<LanguageModelType<BaseModelType>>>
 
   async fetchLmModels() {