Fix icon ai (#8270)

* changing AI icon in Pref

* Fix final icon for AI

* delete unused file

* fix-merge-conflicts

---------

Co-authored-by: naman-bruno <naman@usebruno.com>
Co-authored-by: Utkarsh <utkarsh@usebruno.com>

packages/bruno-app/src/components/AIAssist/index.js

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useSelector } from 'react-redux';
 import get from 'lodash/get';
 import Tippy from '@tippyjs/react';
-import { IconStars, IconX, IconArrowBackUp, IconPlayerStop } from '@tabler/icons';
+import { IconX, IconArrowBackUp, IconPlayerStop } from '@tabler/icons';
+import IconSparkles from 'components/Icons/IconSparkles';
 import { aiGenerateScript, stopAiGeneration } from 'utils/ai';
 import StyledWrapper, { PopupWrapper } from './StyledWrapper';
 
@@ -187,7 +188,7 @@ const AIAssist = ({ scriptType, currentScript, requestContext, docsContext, vari
           <PopupWrapper className="ai-assist-popup" role="dialog" aria-label={title} tabIndex={-1} {...attrs}>
             <div className="popup-header">
               <span className="popup-title">
-                <IconStars size={12} strokeWidth={1.75} />
+                <IconSparkles size={12} strokeWidth={1.75} />
                 {title}
               </span>
               <button className="popup-close" onClick={close} type="button" aria-label="Close">
@@ -292,7 +293,7 @@ const AIAssist = ({ scriptType, currentScript, requestContext, docsContext, vari
           type="button"
           aria-label={title}
         >
-          <IconStars size={14} strokeWidth={1.75} />
+          <IconSparkles size={14} strokeWidth={1.75} />
         </button>
       </Tippy>
     </StyledWrapper>

packages/bruno-app/src/components/AiChatSidebar/index.js

@@ -6,13 +6,13 @@ import {
   IconCheck,
   IconCode,
   IconWand,
-  IconStars,
   IconCornerDownLeft,
   IconChevronDown,
   IconHistory,
   IconPlus,
   IconTrash
 } from '@tabler/icons';
+import IconSparkles from 'components/Icons/IconSparkles';
 import get from 'lodash/get';
 import find from 'lodash/find';
 import MenuDropdown from 'ui/MenuDropdown';
@@ -572,7 +572,7 @@ const AiChatSidebar = ({ collection }) => {
 
   const ModelSelectorTrigger = forwardRef((props, ref) => (
     <div ref={ref} className="model-btn" {...props}>
-      <IconStars size={14} strokeWidth={1.75} />
+      <IconSparkles size={14} strokeWidth={1.75} />
       <span>{selectedModelLabel}</span>
       <IconChevronDown size={12} />
     </div>
@@ -600,7 +600,7 @@ const AiChatSidebar = ({ collection }) => {
       <div className="processing-indicator">
         <div className="processing-content">
           <div className="processing-icon">
-            {stage.icon === 'sparkles' && <IconStars size={12} />}
+            {stage.icon === 'sparkles' && <IconSparkles size={12} />}
             {stage.icon === 'wand' && <IconWand size={12} />}
             {stage.icon === 'code' && <IconCode size={12} />}
             {stage.icon === 'send' && <IconCornerDownLeft size={12} />}
@@ -724,7 +724,7 @@ const AiChatSidebar = ({ collection }) => {
     const suggestions = SUGGESTIONS_BY_TYPE[contentType] || SUGGESTIONS_BY_TYPE.app;
     return (
       <div className="empty-state">
-        <div className="empty-icon"><IconStars size={20} /></div>
+        <div className="empty-icon"><IconSparkles size={20} /></div>
         <h3>AI Assistant</h3>
         <p>Ask me to generate or modify code, tests, scripts, and docs.</p>
         <div className="suggestions">
@@ -753,7 +753,7 @@ const AiChatSidebar = ({ collection }) => {
       <div className="ai-sidebar">
         <div className="ai-sidebar-header">
           <div className="header-left">
-            <IconStars size={18} className="header-icon" />
+            <IconSparkles size={18} className="header-icon" />
             <span className={`header-method method-${(requestMethod || 'get').toLowerCase()}`}>{requestMethod}</span>
             <span className="header-title">{requestName}</span>
             {chatsWithMessages.length > 1 && (

packages/bruno-app/src/components/Icons/IconSparkles/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const IconSparkles = ({ size = 24, strokeWidth = 2, color = 'currentColor', ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" />
+    </svg>
+  );
+};
+
+export default IconSparkles;

packages/bruno-app/src/components/Preferences/AI/index.js

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
 import { IconPlus, IconSettings, IconShieldLock, IconTerminal2 } from '@tabler/icons';
+import IconSparkles from 'components/Icons/IconSparkles';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import ToggleSwitch from 'components/ToggleSwitch';
 import { clearAiApiKey, getAiStatus } from 'utils/ai';
@@ -334,10 +335,13 @@ const AI = () => {
         <div className="ai-tab-panel" role="tabpanel">
           <div className="ai-master flex items-center justify-between gap-4 px-3.5 py-3 mb-4">
             <div className="flex flex-col gap-0.5 min-w-0">
-              <span className="text-[13px] font-semibold">AI Features</span>
-              <span className="ai-master-summary text-[11px]">
-                Turn on to configure providers and models. Your keys stay local.
-              </span>
+              <div className="flex items-center gap-2 text-[13px] font-semibold">
+                <IconSparkles size={15} strokeWidth={1.75} className="ai-master-icon" />
+                <span className="text-[13px] font-semibold">AI Features</span>
+                <span className="ai-master-summary text-[11px]">
+                  Turn on to configure providers and models. Your keys stay local.
+                </span>
+              </div>
             </div>
             <ToggleSwitch
               size="m"

packages/bruno-app/src/components/Preferences/index.js

@@ -10,10 +10,10 @@ import {
   IconKeyboard,
   IconZoomQuestion,
   IconSquareLetterB,
-  IconDatabase,
-  IconStars
+  IconDatabase
 } from '@tabler/icons';
 
+import IconSparkles from 'components/Icons/IconSparkles';
 import Support from './Support';
 import General from './General';
 import Themes from './Themes';
@@ -105,7 +105,7 @@ const Preferences = () => {
             Keybindings
           </div>
           <div className={getTabClassname('ai')} role="tab" onClick={() => setTab('ai')}>
-            <IconStars size={16} strokeWidth={1.5} />
+            <IconSparkles size={16} strokeWidth={1.5} />
             AI
           </div>
           <div className={getTabClassname('cache')} role="tab" onClick={() => setTab('cache')}>

packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js

@@ -17,9 +17,9 @@ import {
   IconFileOff,
   IconCode,
   IconAppWindow,
-  IconTransform,
-  IconStars
+  IconTransform
 } from '@tabler/icons';
+import IconSparkles from 'components/Icons/IconSparkles';
 import OpenAPISyncIcon from 'components/Icons/OpenAPISync';
 import { switchWorkspace, renameWorkspaceAction, exportWorkspaceAction, confirmWorkspaceCreation, cancelWorkspaceCreation } from 'providers/ReduxStore/slices/workspaces/actions';
 import { updateWorkspace } from 'providers/ReduxStore/slices/workspaces';
@@ -708,7 +708,7 @@ const CollectionHeader = ({ collection, isScratchCollection }) => {
                     data-testid="ai-assistant"
                     className={isAiSidebarOpen ? 'active' : ''}
                   >
-                    <IconStars size={16} strokeWidth={1.5} />
+                    <IconSparkles size={16} strokeWidth={1.5} />
                   </ActionIcon>
                 </ToolHint>
               )}