fix: add rate activation

gmpetrov · Aug 31, 2023 · 528c036 · 528c036
1 parent 59f3c5d
commit 528c036
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/components/RateLimitForm.tsx b/components/RateLimitForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, FormLabel, Typography } from '@mui/joy';
+import { Button, Checkbox, FormLabel, Typography } from '@mui/joy';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -10,19 +10,22 @@ const rateLimitSchema = AgentInterfaceConfig.pick({
   rateLimit: true,
   rateLimitInterval: true,
   rateLimitMessage: true,
+  isRateActive: true,
 });
 
 export type RateLimitFields = z.infer<typeof rateLimitSchema>;
 
 interface IRateLimitFormProps {
   onSubmit(args: RateLimitFields): Promise<void>;
+  isRateActive: boolean;
   rateLimit?: number;
   rateLimitInterval?: number;
   rateLimitMessage?: string;
 }
 
 const RateLimitForm: React.FC<IRateLimitFormProps> = ({
   onSubmit,
+  isRateActive,
   rateLimit,
   rateLimitInterval,
   rateLimitMessage,
@@ -45,13 +48,28 @@ const RateLimitForm: React.FC<IRateLimitFormProps> = ({
         iFrame and Standalone integrations. (max X messages every Y seconds)
       </Typography>
 
+      <div className="flex space-x-4 my-4">
+        <Checkbox
+          size="lg"
+          {...register('isRateActive')}
+          defaultChecked={isRateActive}
+        />
+        <div className="flex flex-col">
+          <FormLabel>Rate Activation</FormLabel>
+          <Typography level="body3">
+            When activated, you can limit the number of messages sent from one
+            device on the Chat Bubble, iFrame and Standalone integrations.
+          </Typography>
+        </div>
+      </div>
+
       <Input
         control={control as any}
         defaultValue={rateLimit}
         sx={{
           mb: 2,
         }}
-        label="Rate Limit (max number of message). Set to 0 to disable."
+        label="Rate Limit (max number of message)."
         {...register('rateLimit')}
       />
       <Input
@@ -76,6 +94,7 @@ const RateLimitForm: React.FC<IRateLimitFormProps> = ({
         placeholder="Usage limit reached"
         {...register('rateLimitMessage')}
       />
+
       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Button
           type="submit"

diff --git a/hooks/useRateLimit.ts b/hooks/useRateLimit.ts
@@ -15,7 +15,6 @@ interface RateResponse {
 
 const useRateLimit = ({ agentId }: { agentId?: string }): RateResponse => {
   const [isRateExceeded, setIsRateExceeded] = useState(false);
-  // const [counter, setCounter] = useState(0);
 
   const getAgentQuery = useSWR<Agent>(
     agentId ? `${API_URL}/api/agents/${agentId}` : null,
@@ -29,7 +28,7 @@ const useRateLimit = ({ agentId }: { agentId?: string }): RateResponse => {
     let currentRateCount = Number(localStorage.getItem('rateLimitCount')) || 0;
     localStorage.setItem('rateLimitCount', `${++currentRateCount}`);
 
-    if (rateLimit > 0 && currentRateCount >= rateLimit) {
+    if (currentRateCount >= rateLimit) {
       setIsRateExceeded(true);
     }
   }, [rateLimit]);
@@ -39,14 +38,14 @@ const useRateLimit = ({ agentId }: { agentId?: string }): RateResponse => {
 
     const interval = setInterval(() => {
       localStorage.setItem('rateLimitCount', '0');
+      setIsRateExceeded(false);
     }, config?.rateLimitInterval * 1000);
 
     return () => clearInterval(interval);
   }, [config]);
 
-  // keep the current behaviour if rateLimit or rateLimitInterval is not provided
   return {
-    isRateExceeded,
+    isRateExceeded: config?.isRateActive ? isRateExceeded : false,
     handleIncrementRateLimitCount,
     rateExceededMessage: config?.rateLimitMessage || 'Usage limit reached',
   };

diff --git a/pages/agents/[agentId]/index.tsx b/pages/agents/[agentId]/index.tsx
@@ -204,7 +204,7 @@ export default function AgentPage() {
   }
 
   const agent = getAgentQuery?.data;
-
+  const agentConfig = agent.interfaceConfig as AgentInterfaceConfig;
   return (
     <Box
       component="main"
@@ -678,17 +678,10 @@ export default function AgentPage() {
 
                 <RateLimitForm
                   onSubmit={handleRateLimit}
-                  rateLimit={
-                    (agent.interfaceConfig as AgentInterfaceConfig).rateLimit
-                  }
-                  rateLimitInterval={
-                    (agent.interfaceConfig as AgentInterfaceConfig)
-                      .rateLimitInterval
-                  }
-                  rateLimitMessage={
-                    (agent.interfaceConfig as AgentInterfaceConfig)
-                      .rateLimitMessage
-                  }
+                  rateLimit={agentConfig.rateLimit}
+                  rateLimitInterval={agentConfig.rateLimitInterval}
+                  rateLimitMessage={agentConfig.rateLimitMessage}
+                  isRateActive={agentConfig.isRateActive}
                 />
 
                 <Divider sx={{ my: 4 }} />

diff --git a/types/models.ts b/types/models.ts
@@ -64,6 +64,7 @@ export const AgentInterfaceConfig = z.object({
   tiktokURL: z.string().optional(),
   githubURL: z.string().optional(),
   websiteURL: z.string().optional(),
+  isRateActive: z.boolean(),
   rateLimit: z
     .number()
     .or(z.string().pipe(z.coerce.number().positive()))