setMessage(e.target.value)}\n        onKeyDown={handleKeyDown}\n        disabled={isDisabled}\n        className=\"flex-grow p-4 bg-gray-900 text-gray-200 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none placeholder-gray-500\"\n        placeholder=\"Type your message here...\"\n        rows={2}\n      />\n      <button \n        onClick={(e) => {\n          if (!isDisabled) {\n            createRippleEffect(e);\n            handleSendMessage();\n          }\n        }}\n        disabled={isDisabled}\n        className={`send-button-gradient text-white p-3 m-1 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900 group relative overflow-hidden ${\n          isDisabled \n            ? 'opacity-50 cursor-not-allowed' \n            : 'hover:scale-105 active:scale-95'\n        }`}\n        aria-label=\"Send message\"\n      >\n        <div className=\"relative overflow-hidden rounded-full\">\n          <div className=\"send-button-shine\"></div>\n          <svg \n            xmlns=\"http://www.w3.org/2000/svg\" \n            className={`h-7 w-7 transform transition-transform duration-300 ${!isDisabled ? 'group-hover:rotate-12' : ''}`} \n            viewBox=\"0 0 24 24\" \n            fill=\"none\" \n            stroke=\"currentColor\" \n            strokeWidth=\"2\" \n            strokeLinecap=\"round\" \n            strokeLinejoin=\"round\"\n          >\n            <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n            <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n          </svg>\n        </div>\n      </button>\n    </div>\n  );\n};","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/loading/chat/code/frontend/components/ChatInput.tsx","extension","actionData","errors"]
</article></body></html>