(fix/widget) centered the toolkit msg

extensions/react-widget/publish.sh

@@ -1,43 +1,85 @@
 #!/bin/bash
-## chmod +x publish.sh - to upgrade ownership
 set -e
-cat package.json >> package_copy.json
-cat package-lock.json >> package-lock_copy.json
+
+# Create backup of original files
+cp package.json package_original.json
+cp package-lock.json package-lock_original.json
+
+# Store the latest version after publishing
+LATEST_VERSION=""
+
 publish_package() {
-  PACKAGE_NAME=$1
-  BUILD_COMMAND=$2
-  # Update package name in package.json
-  jq --arg name "$PACKAGE_NAME" '.name=$name' package.json > temp.json && mv temp.json package.json
+    PACKAGE_NAME=$1
+    BUILD_COMMAND=$2
+    IS_REACT=$3
 
-  # Remove 'target' key if the package name is 'docsgpt-react'
-  if [ "$PACKAGE_NAME" = "docsgpt-react" ]; then
-    jq 'del(.targets)' package.json > temp.json && mv temp.json package.json
-  fi
+    echo "Preparing to publish ${PACKAGE_NAME}..."
+    
+    # Restore original package.json state before each publish
+    cp package_original.json package.json
+    cp package-lock_original.json package-lock.json
 
-  if [ -d "dist" ]; then
-    echo "Deleting existing dist directory..."
-    rm -rf dist
-  fi
+    # Update package name in package.json
+    jq --arg name "$PACKAGE_NAME" '.name=$name' package.json > temp.json && mv temp.json package.json
 
-  npm version patch
+    # Handle targets based on package type
+    if [ "$IS_REACT" = "true" ]; then
+        echo "Removing targets for React library build..."
+        jq 'del(.targets)' package.json > temp.json && mv temp.json package.json
+    fi
 
-  npm run "$BUILD_COMMAND"
+    # Clean dist directory
+    if [ -d "dist" ]; then
+        echo "Cleaning dist directory..."
+        rm -rf dist
+    fi
 
-  # Publish to npm
-  npm publish
-  # Clean up
-  mv package_copy.json package.json
-  mv package-lock_copy.json package-lock.json
-  echo "Published ${PACKAGE_NAME}"
+    # update version and store it
+    LATEST_VERSION=$(npm version patch)
+    echo "New version: ${LATEST_VERSION}"
+
+    # Build package
+    npm run "$BUILD_COMMAND"
+
+    # Replace npm publish with npm pack for testing
+    npm publish
+
+    echo "Successfully packaged ${PACKAGE_NAME}"
+
+    # Log the bundle size
+    TARBALL="${PACKAGE_NAME}-${LATEST_VERSION#v}.tgz"
+    if [ -f "$TARBALL" ]; then
+        BUNDLE_SIZE=$(du -h "$TARBALL" | cut -f1)
+        echo "Bundle size for ${PACKAGE_NAME}: ${BUNDLE_SIZE}"
+    else
+        echo "Error: ${TARBALL} not found."
+        exit 1
+    fi
 }
 
-# Publish docsgpt package
-publish_package "docsgpt" "build"
+# First publish docsgpt (HTML bundle)
+publish_package "docsgpt" "build" "false"
 
-# Publish docsgpt-react package
-publish_package "docsgpt-react" "build:react"
+# Then publish docsgpt-react (React library)
+publish_package "docsgpt-react" "build:react" "true"
 
+# Restore original state but keep the updated version
+cp package_original.json package.json
+cp package-lock_original.json package-lock.json
 
-rm -rf package_copy.json
-rm -rf package-lock_copy.json
-echo "---Process completed---"
+# Update the version in the final package.json
+jq --arg version "${LATEST_VERSION#v}" '.version=$version' package.json > temp.json && mv temp.json package.json
+
+# Run npm install to update package-lock.json with the new version
+npm install --package-lock-only
+
+# Cleanup backup files
+rm -f package_original.json
+rm -f package-lock_original.json
+rm -f temp.json
+
+echo "---Process completed---"
+echo "Final version in package.json: $(jq -r '.version' package.json)"
+echo "Final version in package-lock.json: $(jq -r '.version' package-lock.json)"
+echo "Generated test packages:"
+ls *.tgz

extensions/react-widget/src/components/SearchBar.tsx

@@ -242,14 +242,20 @@ white-space: pre-wrap;
 const Toolkit = styled.kbd`
     position: absolute;
     right: 4px;
-    top: 4px;
+    top: 50%;
+    transform: translateY(-50%);
     background-color: ${(props) => props.theme.primary.bg};
     color: ${(props) => props.theme.secondary.text};
     font-weight: 600;
     font-size: 10px;
-    padding: 3px;
+    padding: 3px 6px;
     border: 1px solid ${(props) => props.theme.secondary.text};
     border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    pointer-events: none;
 `
 const Loader = styled.div`
   margin: 2rem auto;