code7-leia 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "author": "code7-xlab",
   "license": "MIT",
   "main": "dist/index.es.js",

package/src/components/Select/index.tsx

@@ -31,7 +31,7 @@ const CustomSelect: React.FC<SelectProps> = ({
     <S.Container>
       <div className="custom-select" onClick={() => setIsOpen(!isOpen)}>
         <div className="selected-option">
-          {selectedValue || placeholder}
+          <span>{selectedValue || placeholder}</span>
           <span className="arrow">&#9660;</span>
         </div>
         {isOpen && (
@@ -45,6 +45,7 @@ const CustomSelect: React.FC<SelectProps> = ({
                   color: option.value === selectedValue ? 'white' : undefined,
                 }}
                 className="option"
+                title={option.label}
                 onClick={() => handleSelectOption(option.value)}
               >
                 {option.label}

package/src/components/Select/styles.tsx

@@ -13,12 +13,25 @@ export const Container = styled.div`
     .selected-option {
       padding: 12px;
       border-radius: 4px;
-      border: 1px solid #979AA5;
+      border: 1px solid var(--neutral-2);
       height: 45px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 14px;
+      max-width: 220px;
+      overflow: hidden;
+      white-space: nowrap;
+
+      span:nth-child(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span:nth-child(2) {
+        color: var(--neutral-3);
+        margin-left: 6px;
+      }
     }
 
     .options {
@@ -38,6 +51,9 @@ export const Container = styled.div`
         transition: background-color 0.1s;
         letter-spacing: 0.5px;
         font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &:hover {
           background-color: #6690ff;

package/src/components/TestArea/index.tsx

@@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { testAction } from '../../store/modules/actions';
 
 export const TestArea = () => {
-  const { id, language, personas, propTags, token, env, readonly } = useLeia();
+  const { id, language, personas, propTags, token, env } = useLeia();
   const t = getLanguage(language)
   const results = useSelector((state: any) => state.message);
   const isloading = useSelector((state: any) => state.isloading);
@@ -24,7 +24,6 @@ export const TestArea = () => {
   const dispatch = useDispatch();
   const tags = propTags ? propTags.tags : [];
 
-
   const optionsPersona = personas && personas.map(persona => {
     return { label: persona.name, value: persona.name }
   })
@@ -33,21 +32,13 @@ export const TestArea = () => {
     return { label: tag, value: tag }
   })
 
-  const handleSelectPersona = (value: string) => {
-    setProfile(value);
-  };
+  const handleSelectPersona = (value: string) => setProfile(value);
 
-  const handleSelectPresset = (value: string) => {
-    setPresset(value);
-  };
+  const handleSelectPresset = (value: string) => setPresset(value);
 
-  const handleSearch = (value: string) => {
-    setSearch(value);
-  };
+  const handleSearch = (value: string) => setSearch(value);
 
-  const handlePrompt = (value: string) => {
-    setPrompt(value);
-  };
+  const handlePrompt = (value: string) => setPrompt(value);
 
   const handleTest = () => {
     dispatch(testAction(search, prompt, profile, presset, id, token, env))
@@ -65,27 +56,46 @@ export const TestArea = () => {
         </S.Header>
         <S.Inputs>
           <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} />
-          <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelectPersona} />
-          <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelectPresset} />
-          <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>
+          <Select
+            placeholder={t.testArea.selectPersona}
+            options={optionsPersona}
+            onSelect={handleSelectPersona}
+          />
+          <Select
+            placeholder={t.testArea.selectPresset}
+            options={optionsPresset}
+            onSelect={handleSelectPresset}
+          />
+          <button onClick={handleTest}><PiWaveformBold />
+            {t.buttons.test}
+          </button>
         </S.Inputs>
         <S.Inputs>
-          {profile === "Custom" && <TextArea className="textarea-message" placeholder={t.testArea.typePrompt} value={prompt} onChange={(e) => { handlePrompt(e.target.value); }} />}
+          {profile === "Custom" && (
+            <TextArea
+              className="textarea-message"
+              placeholder={t.testArea.typePrompt}
+              value={prompt}
+              onChange={(e) => handlePrompt(e.target.value)}
+            />
+          )}
         </S.Inputs>
         {
           !results ? (
             <EmptyState
-              icon={<FaList></FaList>}
+              icon={<FaList />}
               title={t.testArea.emptyState.title}
               description={t.testArea.emptyState.description}
               activeButton={false}
             />
-          ) : <S.Result>
-                <div className='icon'>
-                  <MdPerson2 />
-                </div>
-                <div className='text'>{results}</div>
-              </S.Result>
+          ) : (
+            <S.Result>
+              <div className="icon">
+                <MdPerson2 />
+              </div>
+              <div className="text">{results}</div>
+            </S.Result>
+          )
         }
       </S.Container>
     )