Merge pull request #84 from OpenAssistantGPT/feat/stop-option

feat: add option to stop message generation
OpenAssistantGPT · Aug 13, 2024 · 73dee6a · 73dee6a
2 parents a31e795 + b829733
commit 73dee6a
Show file tree

Hide file tree

Showing 6 changed files with 331 additions and 189 deletions.
diff --git a/.changeset/gentle-games-relax.md b/.changeset/gentle-games-relax.md
@@ -0,0 +1,6 @@
+---
+'openassistantgpt': patch
+'@openassistantgpt/ui': patch
+---
+
+Add option to stop the message generation when it is being generated
diff --git a/examples/website-chatbot-window/package.json b/examples/website-chatbot-window/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@openassistantgpt/assistant": "latest",
     "@openassistantgpt/react": "latest",
-    "@openassistantgpt/ui": "latest",
+    "@openassistantgpt/ui": "workspace:*",
     "ai": "3.2.32",
     "buffer": "^6.0.3",
     "next": "14.2.5",

diff --git a/package.json b/package.json
@@ -24,19 +24,19 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
-    "@playwright/test": "^1.45.3",
+    "@playwright/test": "^1.46.0",
     "chalk": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-openassistantgpt": "workspace:*",
     "husky": "^9.1.4",
-    "lint-staged": "^15.2.8",
+    "lint-staged": "^15.2.9",
     "next": "15.0.0-canary.23",
-    "playwright": "^1.45.3",
+    "playwright": "^1.46.0",
     "prettier": "2.8.8",
     "publint": "0.2.9",
     "react": "19.0.0-rc-cc1ec60d0d-20240607",
     "react-dom": "19.0.0-rc-cc1ec60d0d-20240607",
-    "turbo": "^2.0.11",
+    "turbo": "^2.0.12",
     "vitest": "1.6.0"
   },
   "homepage": "https://openassistantgpt.io",

diff --git a/packages/ui/components/chat-history.tsx b/packages/ui/components/chat-history.tsx
@@ -3,9 +3,9 @@
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
-import { Icons } from '@/components/icons';
 import { Message } from '@openassistantgpt/react';
 import { EmptyPlaceholder } from '@/components/empty-placeholder';
+import { LucidePlus, LucideTrash } from 'lucide-react';
 
 export function ChatHistory({
   threads,
@@ -101,7 +101,7 @@ export function ChatHistory({
                         deleteThreadFromHistory(mapThreadId);
                       }}
                     >
-                      <Icons.trash className="h-4 w-4" />
+                      <LucideTrash className="h-4 w-4" />
                       <span className="sr-only">Delete</span>
                     </Button>
                   </div>
@@ -155,7 +155,7 @@ export function ChatHistory({
                     setMenuOpen(false);
                   }}
                 >
-                  <Icons.add className="h-5 w-5" />
+                  <LucidePlus className="lucide lucide-plus h-5 w-5" />
                 </Button>
               </div>
               <Button

diff --git a/packages/ui/components/chat.tsx b/packages/ui/components/chat.tsx
@@ -60,6 +60,7 @@ export function OpenAssistantGPTChat({
     setThreadId,
     threads,
     deleteThreadFromHistory,
+    stop,
   } = useAssistant({
     id: chatbot.id,
     api: path,
@@ -310,19 +311,48 @@ export function OpenAssistantGPTChat({
                     <div className={`absolute top-[14px] right-0`}>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <Button
-                            id="submit"
-                            disabled={
-                              status !== 'awaiting_message' || input === ''
-                            }
-                            type="submit"
-                            size="icon"
-                          >
-                            <Icons.arrowRight />
-                            <span className="sr-only">Send message</span>
-                          </Button>
+                          {status === 'awaiting_message' ? (
+                            <Button
+                              id="submit"
+                              disabled={input === ''}
+                              type="submit"
+                              size="icon"
+                            >
+                              <Icons.arrowRight />
+                              <span className="sr-only">Send message</span>
+                            </Button>
+                          ) : (
+                            <Button
+                              id="stop"
+                              onClick={stop}
+                              size="icon"
+                              type="submit"
+                            >
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                width="24"
+                                height="24"
+                                fill="currentColor"
+                              >
+                                <rect
+                                  x="6"
+                                  y="6"
+                                  width="12"
+                                  height="12"
+                                  rx="2"
+                                  ry="2"
+                                />
+                              </svg>
+                              <span className="sr-only">Stop message</span>
+                            </Button>
+                          )}
                         </TooltipTrigger>
-                        <TooltipContent>Send message</TooltipContent>
+                        <TooltipContent>
+                          {status === 'awaiting_message'
+                            ? 'Send message'
+                            : 'Stop message'}
+                        </TooltipContent>
                       </Tooltip>
                     </div>
                   </div>